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

时间：2011-12-19 17:00:50

标签： css css3 mobile responsive-design media-queries

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

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

5 个答案:

答案 0 :(得分：43)

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

  

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

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

答案 1 :(得分：24)

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

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

有了这么多的视口可能性，将断点与特定设备匹配听起来并不是一种有效的策略。只要跟上流行的东西，新的东西，以及改变的东西将是一项永无止境的任务。

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

使用此方法，您的网站会使用其自然断点来适应所有视口大小，而不是针对当前常见屏幕尺寸的人工断点。

这种方法简单易行，可能难以置信：

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

    8. 当然，如果您正在设计移动优先，那么这个过程就会逆转：从一个狭窄的屏幕开始，然后逐步解决。

    使用自然断点，您不再需要专注于视口大小的巨大范围，因为您的网站现在和将来都将适应任何设备。

    根据one developer，这种方法为其原始意图带来了完整的断点：

      

    我不确定我们是怎么想出“设备特定的”这句话   断点“无论如何......正如我所理解的那样，术语”断点“   始终是内容或布局“破”的参考   （即显示有缺陷），因此您需要应用媒体查询   那一点。但我想这只是语义，我一直在想   在内容的上下文中引用断点是常识   或布局。

         

    ~Louis Lazaris，ImpressiveWebs

         

    <子>源：   https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450 的

    更多信息（外部网站）：

答案 2 :(得分：21)

这就是我用的...... 

@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和1382px。

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

JJ

答案 3 :(得分：1)

要寻找的一些决议：

iphone屏幕（很多其他智能手机都有类似的屏幕尺寸：  分辨率为960×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但我没有为他们担保  trustworthyness。

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

答案 4 :(得分：0)

根据我自己的需要，我想出了以下...我称之为“适合成熟的眼睛”或“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% 的缩放比例，在 1920 像素的显示器上它变成了 1536 像素。 在我的带有 1366 像素显示器和 125% 缩放比例的 10 英寸笔记本电脑上，它变成了大约 1093 像素（1100 像素最终将覆盖和未来的大分辨率横向手机）。

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

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

附言 当然，你可以添加中间视口等等...

相关问题
最新问题