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

Question

我现在正在深入研究响应式CSS和设计,我想知道我应该如何计算各种设备宽度.我不想花一整天的时间来测试每一台移动设备,我只想让响应式布局足够好.

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

任何建议都会很棒.我不是Web开发或CSS的新手,但对响应式设计来说却是全新的.

Answer 1

您似乎正在尝试确定应用断点的位置和时间.

而不是在一堆设备上测试分辨率,为什么不建立一个在每个分辨率都可接受的响应式设计？没有神奇的断点来修复每个设备的响应式网站,因为每个响应式网站将根据布局,内容等而有所不同,并且有大量不同的设备具有不同的分辨率.

你可能会想," 到底是什么,我不会逐像素地检查我的网站, "但这并不是我的意思.

查找您网站的断点:

跳转到浏览器,导航到您的网站,然后打开控制台
将视口大小调整为非常低的分辨率.320px是一个很好的起点.
(注意:要在控制台中获取视口类型window.innerWidth的大小.有关增强调试设计的更多方法,请参阅参考资料)
分析你的布局.它如何看待这个决议？如果您需要以此分辨率更改布局,则需要添加断点的时间!
慢慢拉伸浏览器窗口,直到出现故障或看起来很糟糕.此时,您需要插入另一个断点.
根据您的心脏内容重复步骤4

记住:

响应式设计的目的不是让您的网站在所有设备上看起来都很好,它可以使您的内容在任何地方看起来都很好- Sam Richards