我现在正在学习响应式CSS和设计，想知道如何确定各种设备的宽度。我不想花一整天去测试每个可能的移动设备，我只想让响应式布局足够工作。
我看到一些网站使用@media only screen and (max-device-width: xx)，但似乎限制在非常特定的分辨率上，而不是实际的浏览器窗口大小。
任何建议都可以。我不是Web开发或CSS的新手，但完全是响应式设计的新手。
如何确定响应式CSS的适当最小宽度和最大宽度值？
4
- CaptSaltyJack
1
1http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/：
EM值万岁：比例式媒体查询的优越性http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/：
响应式设计：为什么你做得不对？ - cimmanon
1个回答
17
看起来您正在尝试确定何时以及在哪里应用断点。
与其在许多设备上测试分辨率，为什么不构建一种对每个分辨率都可接受的响应式设计呢？没有一种魔法断点可以修复适用于所有设备的响应式网站，因为每个响应式网站都会根据布局、内容等而有所不同，而且有大量具有不同分辨率的不同设备。
您可能会想：“我肯定不会逐像素检查我的网站”，但这并不是我真正的意思。
找到您网站的断点：
- 进入浏览器，导航到您的网站，并打开控制台
- 将视口大小调整为非常低的分辨率。320px是一个很好的起点。
(注意：要获取视口的大小，请在控制台中输入window.innerWidth。有关增强设计调试的更多方法，请参见资源) - 分析您的布局。在此分辨率下的外观如何？如果您需要更改此分辨率下的布局，则是添加断点的时候了！
- 慢慢地拉伸浏览器窗口，直到出现问题或外观变得可怕。此时，您需要插入另一个断点。
- 重复步骤4，直到满意为止
请记住：
响应式设计的目的不是使您的网站在所有设备上看起来好看，而是使您的内容无论在任何地方都能看起来很棒- Sam Richards
资源:
如上视频所述，Modernizr 是一个非常棒的JS库，可帮助检测设备特定的功能。- Carrie Kendall
3
1过去几个版本的Firefox在
工具>Web开发者中包括了一个很好的响应式设计视图，其中列出了各种设备分辨率的预设列表。键盘快捷键是Ctrl+Shift+M。 - JAB1很棒的答案！我找到了一个Chrome的响应式检查器，但不幸的是它有一些问题，不能正确地检测断点。我可能只会找一个简单的浏览器窗口扩展程序来轻松显示当前浏览器宽度。 - CaptSaltyJack
如果你使用的是Chrome浏览器，你可以随时使用控制台：选择“查看”>“开发者”>“JavaScript控制台”。此外，我还在我的答案中添加了一个教程，教你如何在Chrome浏览器中使用开发者工具来获得更好的响应式调试体验 : ] - Carrie Kendall
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接