css - 响应式网站上媒体查询的常见断点

Question

所以我正在开发我的第一个响应式网站，它广泛使用了媒体查询。我想知道是否有一些我应该优化的常见页面宽度。

我可能会有一个最大宽度(不会完全流畅)我想我可能会有 3-5 个设置宽度，它们之间有有趣的小 CSS3 过渡(类似于 CSS Tricks 的工作方式)。

目前我使用的数字有些随意:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

另外，我想我已经读到一些移动设备的行为不符合预期(使用 @media)。这在什么情况下起作用？我应该如何处理这些情况？

Answer 1

• This is a pretty useful guide for mobile screen sizes.
• Great guide for stats on screen resolutions
• 如果您有权访问有关解决方案的 Google Analytics(分析)数据，它也可能很有值(value)。

此外，我肯定会推荐使用 device-width 作为您的移动设备尺寸，除非您希望用户在非移动设备上调整浏览器窗口大小时看到您的移动设备样式。 width 是视口(viewport)的宽度，device-width 是设备当前的分辨率。

Also, I think I have read that some mobile devices don't behave as expected (with @media).

你是对的。许多设备不会为您提供您期望的 width 或 device-width ，尤其是在横向和纵向之间切换时(它们通常会在纵向时提供横向宽度)。设备自动缩放也会给事情带来麻烦。使用 viewport meta tag可以帮助解决其中的许多问题。 (More info on that here)