如何为响应式 CSS 计算出正确的最小宽度和最大宽度值？

Question

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

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

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

Answer 1

您似乎正试图弄清楚在何时何地应用您的断点。

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

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

找到您网站的断点：

1. 进入浏览器，导航到您的网站，然后打开控制台
2. 将视口调整为非常低的分辨率。 320 像素是一个很好的起点。
   （注意：要在控制台中获取视口类型 window.innerWidth 的大小。有关增强调试设计的更多方法，请参阅资源）
3. 分析您的布局。它如何看待这个决议？如果您需要在此分辨率下更改布局，那么是时候添加断点了！
4. 慢慢拉伸浏览器窗口，直到出现损坏或看起来很糟糕。此时您需要插入另一个断点。
5. 重复第 4 步，尽情享受

记住：

响应式设计的重点不是让您的网站在所有设备上都看起来不错，而是让您的内容在任何地方都看起来不错 - 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