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

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

• 这是一个非常有用的移动屏幕尺寸指南.
• 屏幕分辨率统计数据的精彩指南
• 如果您有权访问,Google Analytics(分析)有关解决方案的数据也很有价值.

此外,我肯定会建议您使用device-width移动设备,除非您希望用户在非移动设备上调整浏览器窗口大小时才能看到您的移动设备.width是视口的宽度,device-width是设备的当前分辨率.

此外,我想我已经读过一些移动设备没有按预期运行(使用@media).

你是对的.许多设备不会给你width或device-width你期望的,横向和纵向之间切换特别是当(他们往往会在画像时,给景观宽度).设备自动缩放也可以解决问题.使用视口元标记可以帮助解决许多这些问题.(更多信息在这里)

Answer 2

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

• 数千种不同设备有数百种不同的屏幕尺寸.
• 未来将带来新的屏幕尺寸.
• Apple,三星,微软,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响应式设计方法
• 视口大小(数百个设备和视口大小的列表)
• 标准设备的媒体查询(针对常用设备的媒体查询列表)

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 {}

在那里有各种其他的,适当的(最小宽度没有最大宽度或最大宽度没有最小宽度),但这是我的基本设置.

就个人而言,我从未理解很多人使用的奇怪宽度.例如,320及以上有五个CSS3媒体查询增量:480,600,768,992和1382px.

这对我没有任何意义.逻辑中断间隔为320px(320,640,960,1280,1600,1920).请注意,这些中断可以为任何方向的任何设备提供略微不同的布局(omnia是240x400,iphone是320x480,droid x是480x858,ipad是768x1024,galaxy s3是720x1280,他们正在谈论1920x1080平板电脑).

JJ