css - 如何为响应式 CSS 找出合适的最小宽度和最大宽度值？

Question

我刚刚开始研究响应式 CSS 和设计，我想知道我应该如何计算出各种设备宽度。我不想花一整天的时间测试每一个可能的移动设备，我只想让响应式布局足够好。

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

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

Answer 1

您似乎在努力弄清楚何时何地应用您的断点。

与其在一堆设备上测试分辨率，不如构建一个在每个分辨率下都可接受的响应式设计？没有神奇的断点可以为每台设备修复响应式网站，因为每个响应式网站都会根据布局、内容等而有所不同，并且有大量不同的设备具有不同的分辨率。

您可能会想，“这到底是怎么回事，我不会逐个像素地检查我的网站，”但这不是我的意思。

寻找您网站的断点:

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

请记住:

The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards

资源:

• 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