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

score 44 · Accepted Answer

这是一个非常有用的移动屏幕尺寸指南。
屏幕分辨率统计信息的绝佳指南
如果您有权访问，有关分辨率的 Google Analytics（分析）数据也可能很有价值。

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

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

你是对的。许多设备不会为您提供您期望的width或device-width您所期望的，尤其是在横向和纵向之间切换时（它们通常会在纵向时提供横向宽度）。设备自动缩放也会给事物带来麻烦。使用视口元标记可以帮助解决许多这些问题。（这里有更多信息）

score 35 · Accepted Answer

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

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

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

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

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

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

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

当然，如果你是在设计移动优先，那么过程会反过来：从窄屏幕开始，然后走出去。

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

根据一位开发人员的说法，这种方法使断点完全符合其初衷：

我不确定我们是如何想出“设备特定断点”这个短语的......据我所知，“断点”一词总是指内容或布局会“中断”的位置（即出现缺陷），因此您需要在那时应用媒体查询。但我想这只是语义，我只是一直认为在内容或布局的上下文中引用断点是常识。

~ Louis Lazaris, ImpressiveWebs

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

更多信息（外部网站）：

score 22 · Accepted Answer

这是我用的...

@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 及以上有五个 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

score 1 · Accepted Answer

要寻找的一些解决方案：

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但我不保证它们的可信度。

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

score 0 · Accepted Answer

根据我自己的需要，我想出了以下...我将此断点称为“成熟的眼睛”或“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 | 最小宽度：1540px / 大字体...

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

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

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

PS当然可以加Middle viewport左右...

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

5 回答 5

Related

Reference