响应站点上媒体查询的常见断点

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

在确定媒体查询的断点时，请考虑以下现实：

• 数千种不同的设备上有数百种不同的屏幕尺寸。
• 未来将带来新的屏幕尺寸。
• 苹果，三星，微软，LG，诺基亚和任何其他设备制造商都可以随时更改其流行型号的屏幕尺寸。

视口的可能性如此之多，将断点与特定设备相匹配听起来并不有效。紧跟流行，新变化以及已更改的内容将是一项永无止境的任务。

更好的方法可能是根据内容和布局设置断点。

通过这种方法，您的站点将使用其自然断点来适应 所有 视口大小，而不是针对当前常见屏幕大小的人为断点。

这种方法是如此简单和容易，可能难以置信：

1. 在台式机或笔记本电脑上运行您的网站。
2. 缩小浏览器窗口时，请注意网站的响应方式。
3. 当您的布局不再完美时，这就是您的第一个断点。
4. 调整您的网站适合该屏幕尺寸（这可能与任何设备无关）。
5. 继续缩小浏览器窗口。
6. 当您遇到下一个布局问题时，这就是您的第二个断点。
7. … 等等等等。

当然，如果您设计的是移动设备优先的产品，那么过程将相反：从窄屏开始，然后逐步解决。

有了自然的断点，您不再需要关注视口大小的庞大范围，因为您的站点现在和将来都可以适应任何设备。

根据一位开发人员的说法，这种方法将断点带到了他们的初衷：

我不确定我们如何提出“特定于设备的断点”一词…据我所知，术语“断点”始终是对内容或布局将“断”的地方的引用（即看起来有缺陷），因此您需要在此时进行媒体查询。但是我想那只是语义，我一直认为在内容或布局的上下文中引用断点是常识。

〜Louis Lazaris， ImpressiveWebs