如何为响应CSS计算适当的最小宽度和最大宽度值？

我现在正在深入研究响应式CSS和设计，我想知道如何计算出各种设备的宽度。我不想花一整天的时间去测试每一台移动设备，我只想得到足够的响应性布局

我看到一些网站使用的是

@纯媒体屏幕和（最大设备宽度：xx）

，但它似乎限制了非常特定的分辨率，而不是实际的浏览器窗口大小

---

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

您似乎在试图找出何时何地应用断点

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

你可能会想，“见鬼，我不会一个像素一个像素地查看我的网站”，但这不是我真正的意思

查找网站的断点：

跳入浏览器，导航到您的网站，然后打开控制台

将视口调整为非常低的分辨率。320px是一个很好的起点。
（注意：在控制台中获取视口类型window.innerWidth的大小。有关增强设计调试的更多方法，请参阅参考资料）

分析你的布局。它如何看待这项决议？如果您需要在此分辨率下更改布局，那么是时候添加断点了

慢慢拉伸浏览器窗口，直到有东西断裂或看起来很可怕。此时，您需要插入另一个断点

尽情地重复第4步

请记住：

响应性设计的目的不是让你的网站在所有设备上都看起来不错，而是让你的内容在任何地方都看起来不错——山姆·理查兹

资源：

• 正如上面视频中提到的，是一个很棒的JS库，可以帮助检测特定于设备的功能

---

和过去几个版本的Firefox在

Tools>webdeveloper

中包含了一个响应良好的设计视图，其中包含了各种设备分辨率的预设列表。键盘快捷键是

Ctrl+Shift+M

。答案很好！我为Chrome找到了一个响应灵敏的检查器，但不幸的是，它有一些问题，不能正确地检测断点。我可能会找到一个简单的浏览器窗口扩展来轻松显示当前的浏览器宽度。如果您在chrome中，您可以始终使用console：选择View>Developer>JavaScript console。我还在回答中添加了一个教程，介绍如何在chrome中使用开发人员工具以获得更好的响应性调试体验：]