有人可以解释 CSS 媒体查询吗？答案

【问题标题】：Can someone please explain CSS media queries?有人可以解释 CSS 媒体查询吗？
【发布时间】：2011-04-06 20:40:15
【问题描述】：

我在css3.info 阅读了有关它们的文章，但我觉得它解释得不够好。我也无法让他们的示例随着我的屏幕尺寸而改变。我在 Safari、FF、Chrome 中尝试过。

这是一个尚未准备好实现的功能吗？

如果我想在浏览器窗口宽度小于 1024px 时调整一些样式。我该怎么做？

【问题讨论】：

标签： css media-queries

【解决方案1】：

适用于屏幕大小的规则意味着，引用 W3C 规范“如果视口的宽度在指定的约束条件下，则可在屏幕和手持设备上使用”。

http://www.w3.org/TR/css3-mediaqueries/

如果要在视口小于 1024px 时调整样式，可以使用这条规则：

@media screen and (max-width: 1024px) { … }

无论如何，这条规则只适用于视口的实际大小。如果您在不重新加载页面的情况下调整视口大小，则不会应用样式。

【讨论】：

这有效，实际上，在 chrome 上，它会在我调整视口大小而不重新加载时更新样式！ :)

【解决方案2】：

当文档显示在大于 800 像素宽的屏幕上时，将样式表应用到文档：

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

在任何宽度小于 400 像素的设备上显示文档时应用样式表：

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

里面

@media all and (max-width:800px) {
    body { color: red; }
}

苹果手机

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::combining media query

【讨论】：

【解决方案3】：

要查看不同的媒体查询对调整大小或方向更改有何反应，请尝试此页面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们对页面的影响。

【讨论】：

【解决方案4】：

这里有几个项目可以解决这个问题，并且处于动态 CSS 和屏幕尺寸的前沿：

320 and up:

“320 及以上”阻止移动设备从下载桌面资产使用小屏幕的样式表作为它的起点。
Lessframework:

Less Framework 是一个 CSS 网格系统用于设计自适应网站。它包含 4 个布局和 3 组排版预设，全部基于单个网格。

【讨论】：