此演示来自积极参与 Web 标准并长期为 Mozilla 做贡献的 Daniel Glazman。

CSS 媒体查询 最初是由 Opera Software 提交给 CSS 工作组的一项提案，现在已在 Firefox 3.5 中实现。简而言之，媒体查询扩展了附加到样式表的媒体声明，以允许根据渲染设备的内在属性进行匹配。

让我们来看一下 HTML 文档中声明样式表的链接元素

<link rel="stylesheet" type="text/css" href="style.css"
      media="screen">

现在假设您希望此样式表仅在内容窗口宽度小于 300 像素时应用于文档... CSS 媒体查询使声明变得简单

<link rel="stylesheet" type="text/css" href="style.css"
      media="screen and (max-width: 300px)">

可用的属性包括视口的宽度和高度、设备的宽度和高度、方向（纵向或横向）、视口的纵横比、设备的纵横比、颜色映射、分辨率和设备类型。

然后，很容易让单个网页能够在各种设备上使用，从移动设备到单色 tty 显示器。

查看演示时，请务必**将窗口从大尺寸调整到非常小尺寸（小于 100 像素！）以查看其运行效果**。

在 Firefox 3.5 中查看演示

通过 planet、RSS 或阅读器加载且没有 JavaScript？请点击此处。