有人可以解释一下CSS媒体查询吗？

Question

我在css3.info阅读了关于他们的文章，但我觉得它不能很好地解释它。我也无法通过屏幕尺寸改变他们的示例。我在Safari，FF，Chrome中尝试过。

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

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

Answer 1

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

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

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

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

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

Answer 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; }
}

for iphone

<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

Answer 3

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

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

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

Answer 4

以下是一些解决此问题的项目，并且处于动态css和屏幕尺寸的最前沿：

• 320 and up：

    

  '320 and Up'阻止移动设备   从下载桌面资产   使用小屏幕的样式表作为   它的出发点。

• Lessframework：

    

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