响应式网站中媒体查询的常见断点

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）。这在哪里发挥作用，我应该如何处理这些情况？

- Zach Lysobey

---

列出设备的屏幕尺寸可能很有用（如果您正在针对一个或多个设备），但我认为更好的方法是针对尺寸进行定位。为了知道哪些尺寸比其他尺寸更常见，我创建了一个存储库。 - akinuri

Answer 1

• 这是一个有关移动屏幕尺寸非常实用的指南。
• 这是一个有关屏幕分辨率统计的绝佳指南。
• 如果您能够访问，那么Google Analytics提供的关于不同分辨率的数据也非常有价值。

此外，我强烈建议使用device-width来设置移动设备的尺寸，除非您希望用户在非移动设备上调整浏览器窗口大小时看到移动样式。 width 是视口的宽度，而device-width 则是当前设备的分辨率。

同样，我认为有些移动设备的行为与预期不符（@media 方式）。

您是正确的。许多设备将不会给出您期望的 width 或 device-width，特别是在横竖屏切换时（它们通常会在纵向模式下提供横向宽度）。设备自动缩放也可能会造成问题。使用视口元标记可以解决许多这些问题。(在这里了解更多信息)

- Drew Gaynor

---

如果您想支持旧的Windows Mobile手机，请确保使用respond.js。 - doubleJ

@JackieChiles，太棒了！我发现Mobile Matrices对于我的当前项目非常有用。@Zach L，我正在使用Twitter Bootstrap学习响应式设计。如果你想在生产中使用它，最好自定义媒体查询。 - GaryP

因此，现今的屏幕分辨率（根据此页面）表明，如果您想应用最小程度的响应式设计，则使用 min-width: 768px 应该足够。 - Fabián

另一个提供不同设备分辨率表的好链接：http://screensiz.es/ - Zach Lysobey

Answer 2

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

• 成千上万种不同设备的屏幕尺寸。
• 未来还会有新的屏幕尺寸出现。
• 苹果、三星、微软、LG、诺基亚以及其他任何设备制造商都可以随时更改其热门型号的屏幕尺寸。

由于可能的视口众多，将断点与特定设备匹配似乎并不是一种有效的策略。跟上什么是流行的、什么是新的和什么已经改变了将是一个永无止境的任务。

更好的做法可能是基于内容和布局来设置断点。

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

这种方法非常简单易行，可能很难相信：

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

当然，如果您正在进行移动优先设计，则该过程将倒叙进行：从狭窄的屏幕开始，逐步扩大。

使用自然断点，您不再需要关注巨大的视口尺寸范围，因为您的站点将适应任何设备，无论现在还是将来。

---

根据一位开发者的说法，这种方法使得断点回归了它们最初的意图：

我不确定我们是如何想出“特定于设备的断点”这个词组的...据我所知，“断点”一直指的是内容或布局会“断裂”的位置。

（即出现问题）因此您需要在那一点应用媒体查询。但我想这只是语义，我一直认为在内容或布局的上下文中引用断点是常识。

〜 Louis Lazaris，ImpressiveWebs

_{来源：https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450}

---

更多信息（外部网站）：

• 为什么您不需要设备特定的断点
• 在响应式设计中设置断点
• Google Developers：如何选择断点
• 响应式设计的 Goldilocks 方法
• 视口尺寸（数百个设备和视口尺寸的列表）
• 标准设备的媒体查询（针对热门设备的媒体查询列表）

- Michael Benjamin

---

我喜欢这个概念，但我想知道为什么浏览器有开发者工具，特别是在Chrome中更新的设备模拟功能——当你只需要调整自己的显示窗口时，这一切都有何意义？ - Brownrice

我想要明确的表达的是，设备模式仍然支持以设备为目标而不是让内容决定在哪里应用媒体查询的做法，而这种做法已经被证明是行不通的 - 为什么？ - Brownrice

@Brownrice，因为许多开发人员仍然针对特定设备进行开发，即使这不是响应式设计的最佳方法。那么对于仅针对iPad或Android平板电脑构建应用程序的开发人员呢？我认为这些Chrome工具会非常有帮助。 - Michael Benjamin

这是唯一有意义的方法。虽然需要多做一些工作，但可以确保您的网站在任何地方都看起来很棒！ - Ajay Gupta

Answer 3

这是我使用的方法...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

我的基本设置中包含了适当的其它设置（例如，只有min-width而没有max-width，或者只有max-width而没有min-width）。

就我个人而言，我从未理解很多人使用的奇怪宽度。例如，320 and up 有五个CSS3媒体查询间隔：480、600、768、992和1382像素。

这对我来说毫无意义。逻辑断点应该是每320像素一个间隔（320、640、960、1280、1600、1920）。请注意，这些断点可以为几乎任何设备在横向或纵向方向上提供稍微不同的布局（Omnia 是240x400，iPhone 是320x480，Droid X 是480x858，iPad 是768x1024，Galaxy S3 是720x1280，他们还谈到了1920x1080的平板电脑）。

JJ

- doubleJ

---

事实上，我也发现从大到小开始编写代码的情况对我来说是一个谜。 - Diana

对于基于网格的CSS，网格宽度可能是一个有趣的断点，因此992-1381范围可能适用于“960像素网格+轻微边框”，而1382+适用于“宽屏幕”。 - Dereckson

由于我的答案一直得到赞，我想做一个小改变。我发现所有这些断点有点麻烦，所以我把它们缩减了。现在，我使用480像素的间隔（而不是320像素）。(max-width:480px)，(min-width: 481px)和(max-width:960px)，(min-width:961px)和(max-width:1440px)，(min-width:1441px)。如果您想针对更高的分辨率进行定位，则480像素的间隔将为您提供1920像素作为下一个断点。 - doubleJ

我发现的另一件事是，如果你在CSS中使用(min-width:1280px)，那么你不能使用width:1280px。这会导致水平滚动条出现，因为垂直滚动条的存在。你需要减去大约17像素（width:1263px应该可以解决问题）。 - doubleJ

只是一个提示，如果您按升序使用min-width，则无需指定“和max-width”，因为下一个min-width增量的样式会优先生效。 - rantao

Answer 4

以下是一些解决方案：

iPhone屏幕（许多其他智能手机具有类似的屏幕尺寸）： 960 x 640像素分辨率，326 ppi http://www.apple.com/iphone/specs.html

iPad屏幕（许多其他平板电脑具有类似的屏幕尺寸）： 1024 x 768像素分辨率，132像素每英寸（ppi） http://www.apple.com/ipad/specs/

“普通”屏幕： 根据http://www.w3schools.com/browsers/browsers_display.asp的说法，许多普通屏幕也具有1024 x 768像素的分辨率，但我不保证它们的可靠性。

我正在寻找更多数据。

- bigblind

---

不是为了复活，而是在我工作的公司网站上，1024×768代表着最常见的分辨率（而且并不多是iPad）。这并不意味着它代表了最大的一块，但它是最常见的一个。 - doubleJ

@doubleJ：问题在于即使最常见的屏幕尺寸是1024x768，窗口的尺寸也不是这样。因此，您应该对此统计数据保持谨慎。 - Yvan

Answer 5

根据我的需求，我想出了以下的...我把这些断点称为“成熟眼镜”或“40+” :)

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body { font-size: 18px; }            /* some font size for small viewport */

/* small viewport navigation (hamburger) */ 
      
@media screen and (min-width: 1100px) {
body { font-size: 20px; }            /* some font size for big viewport */
/* css for big viewport navigation */
}

@media screen and (min-width: 1540px) {
body { font-size: 22px; }              /* some font size for large viewport */
/* eventually css for large viewport */
}

</style>
</head>

小视口 - 没有@media / 小视口菜单，小字体...

大视口 - @media | 最小宽度：1100px / 大视口菜单，中等字体...

超大视口 - @media | 最小宽度：1540px / 大字体...

为什么是1100px和1540px？ 当然这是个人喜好，但也许对某些人来说会很有趣... 因为我的眼睛需要使用Windows 125%缩放，在1920px的显示器上变成了1536px。 在我带有1366px显示器和125%缩放的10英寸笔记本电脑上，它变成了约1093px（1100px最终将覆盖横向未来的大分辨率手机）。

在这里您可以检查缩放是否正确：www.sirmium.org/test/px.html

在这里您可以找到上述断点示例（字体缩放）：www.sirmium.org/test/breakpoints.html

P.S. 当然，您也可以添加中等视口之类的...

- skulptron