我刚刚开始研究响应式 CSS 和设计,我想知道我应该如何找出各种设备宽度。我不想花一整天的时间来测试每一个可能的移动设备,我只想让响应式布局足以让它发挥作用。

我看到一些网站使用 @media only screen and (max-device-width: xx),但似乎将其限制为非常具体的分辨率,而不是实际的浏览器窗口大小。

任何建议都会很棒。我对 Web 开发或 CSS 并不陌生,但对响应式设计完全陌生。

最佳答案

似乎您正在尝试确定在何处以及何时应用断点
与其在一堆设备上测试分辨率,为什么不构建一个在 每个 分辨率下都可接受的响应式设计?没有为每个设备修复响应式网站的神奇断点,因为每个响应式网站都会因布局、内容等而异,并且有大量不同分辨率的设备。
您可能会想,“这到底是怎么回事,我不会逐个像素地检查我的网站”,但这并不是我的意思。
查找您网站的断点:

  • 跳转到浏览器,导航到您的网站,然后打开控制台
  • 将视口(viewport)调整为非常低的分辨率。 320px 是一个很好的起点。
    ( 注意: 要在控制台中获取视口(viewport)类型 window.innerWidth 的大小。请参阅 资源 以获取更多增强调试设计的方法)
  • 分析您的布局。它如何看待这个分辨率?如果您需要在此分辨率下更改布局,那么是时候添加断点了!
  • 慢慢地拉伸(stretch)浏览器窗口,直到有东西损坏或看起来很糟糕。此时,您需要插入另一个断点。
  • 重复第 4 步,尽情享受

  • 记住:

    资源:
  • Responsive Web Design - Programming with Anthony
  • Responsive Typography
  • Logical Breakpoints For Your Responsive Design
  • 正如上面视频中提到的,Modernizr 是一个很棒的 JS 库,它有助于检测特定于设备的功能
  • Responsive Design View Feature in Firefox 15+
  • Responsive Design View Tutorial for Chrome
  • 关于css - 如何为响应式 CSS 找出合适的最小宽度和最大宽度值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16842682/

    10-10 08:34