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

Posted 2023-03-06

【中文标题】响应式网站上媒体查询的常见断点

【英文标题】：Common breakpoints for media queries on a responsive site

【发布时间】：2012-01-23 18:50:43

【问题描述】：

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

我可能会有一个最大宽度（不会完全流动）我想我可能会有 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）。这在哪里发挥作用，我应该如何处理这些情况？

【问题讨论】：

虽然列出设备的屏幕尺寸可能很有用（如果您针对的是一个或多个设备），但我认为目标尺寸会更好。为了知道哪些尺寸比其他尺寸更频繁，我创建了一个repository。

【参考方案1】：

This is a pretty useful guide for mobile screen sizes. Great guide for stats on screen resolutions 如果您可以访问有关分辨率的 Google Analytics（分析）数据，这些数据也很有价值。

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

另外，我想我已经读到一些移动设备的行为不符合预期（使用@media）。

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

【讨论】：

如果您想支持旧版 windows 手机，请确保并使用respond.js。

@JackieChiles，很好的分享！我发现移动矩阵对我当前的项目非常有用。@Zach L，我使用Twitter Bootstrap 进行响应式设计学习。如果您想在生产中使用它，最好自定义媒体查询。

所以，现在的屏幕分辨率（根据this page）表明，如果你想应用最低级别的响应式设计，min-width: 768px 就足够了。

另一个提供不同设备分辨率表的好链接：screensiz.es

【参考方案2】：

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

数千种不同的设备有数百种不同的屏幕尺寸。 未来将带来新的屏幕尺寸。 Apple、Samsung、Microsoft、LG、Nokia 和任何其他设备制造商都可以随时更改其热门机型的屏幕尺寸。

鉴于有如此多的视口可能性，将断点匹配到特定设备听起来并不是一种有效的策略。仅仅跟上流行的东西、新的东西和变化的东西将是一项永无止境的任务。

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

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

这个方法简单易行，让人难以置信：

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

当然，如果您是先设计移动设备，那么过程会反过来：从窄屏幕开始，然后逐步解决。

借助自然断点，您不再需要关注大量视口大小，因为您的网站将适应现在和未来的任何设备。

---

根据one developer 的说法，这种方法将断点带回了它们的初衷：

我不确定我们是如何想到“特定于设备的 断点”无论如何......据我所知，术语“断点” 始终是内容或布局将“中断”的位置的参考 （即出现缺陷），因此您需要在 那一点。但我想这只是语义，我只是一直认为 在内容的上下文中引用断点是常识 或布局。

~ Louis Lazaris，ImpressiveWebs

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

---

更多信息（外部网站）：

Why You Don't Need Device Specific Breakpoints Setting Breakpoints in Responsive Design Google Developers: How to choose breakpoints The Goldilocks Approach to Responsive Design Viewport Sizes（数百种设备和视口大小的列表） Media Queries for Standard Devices（针对流行设备的媒体查询列表）

【讨论】：

我喜欢这个概念，我想知道为什么浏览器有开发者工具，特别是 Chrome 中更新的设备模式可以模拟设备 - 当您只需要调整自己的显示窗口时？

我想要得到的确切是，设备模式仍然支持定位设备的做法，而不是让内容决定在哪里应用媒体查询，当这已被证明是一种不可行的方法时 - 为什么?

@Brownrice，因为许多开发人员仍然针对特定设备，即使这不是响应式设计的最佳方法。那么开发者仅为 iPad 构建应用程序呢？还是安卓平板？我认为那些 Chrome 工具会很有帮助。

【参考方案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 

那里有各种其他的，视情况而定（没有最大宽度的最小宽度或没有最小宽度的最大宽度），但这是我的基本设置。

就个人而言，我从来不理解很多人使用的奇怪宽度。例如，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

【讨论】：

确实，我还发现了从大到小开始的代码，这对我来说是个谜。

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

由于我的回答不断得到支持，我想稍微改变一下。我发现所有这些断点有点麻烦，所以我把它删减了。现在，我使用 480 像素（而不是 320 像素）的间隔。 (max-width:480px)、(min-width: 481px) and (max-width: 960px)、(min-width: 961px) and (max-width: 1440px)、(min-width: 1441px)。如果您想以更高的分辨率为目标，则 480 像素的间隔将授予您 1920 像素作为下一个断点。

我发现的另一件事是，如果你 (min-width:1280px) 你不能在你的 CSS 中 width:1280px。由于垂直滚动条，这将导致水平滚动条。您需要减去大约 17px（width:1263px 应该可以）。

【参考方案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/

“正常”屏幕 许多普通屏幕也具有 1024 x 768 像素的分辨率，根据： http://www.w3schools.com/browsers/browsers_display.asp 但我不担保他们 值得信赖。

我现在正在寻找更多数据。

【讨论】：

不是复活，而是在我工作的公司的网站上，1024x768 代表了最常见的单一分辨率（ipad 并不多）。这并不是说它代表最大的块，但它是最常见的。

@doubleJ：问题是即使最常见的屏幕尺寸是 1024x768，窗口的尺寸也不是。所以你应该小心这个统计数据。

【参考方案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 | min-width: 1100px / 大视口菜单，中间字体...

大视口 - @media | min-width: 1540px / 大字体...

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

如果你使用它，你可以在这里检查缩放：www.sirmium.org/test/px.html

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

附： 当然也可以加Middle viewport左右...