CSS media 类型

CSS 是 web 设计中非常重要的一部分。CSS 也非常的强大，通过指定 media 类型，可以为不同的显示设备指定不同的显示样式。CSS2 可以识别的 media 类型中有屏幕显示(screen)、打印版本(print)、投影仪(projection) 等， 而且不止这些，参见这里。 可以期望 CSS3 会引入更多的 media 类型（比如 3D 眼镜？）。如果 media 类型是 all，则意味着 CSS 文件适合各种设备。这也是缺省设置，未指定特定 media 类型的样式规则会适用于所有设备。

可以在 HTML 文件中指定 CSS 文件适合的 media 类型：

<link href="style1.css" rel="stylesheet" media="all" type="text/css" />
<link href="print.css" rel="stylesheet" media="print" type="text/css" />

不过这样浏览器需要请求多个 CSS 文件，有人担心可能引起性能问题。 我们还有另外一种方式在一个 CSS 文件中为不同的 media 指定不同的样式规则。 例如下面的 CSS 代码使得页面字体无衬线且比较大，适合如今的电脑屏幕； 而打印版本使用 12pt 的带衬线字体，且指定白底黑字，适于打印。

@media screen {
    body {
        font-family: sans-serif;
        font-size: 16px;
    }
}
@media print {
    body {
        font-family: serif;
        font-size: 12pt;
        background-color: white;
        color: black;
    }
}

关于适合打印的 CSS 设计，alistapart 和 meyerweb 有不错的介绍。

CSS 指定 media 类型时还支持带逻辑运算的高级选择， 通过它可以更精细地为不同屏幕大小指定不同的样式，以更好地设计网页。 下面是一个来自 CSS-Tricks 的例子：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

其中 and 是逻辑与，逗号代表逻辑或。此外 not 也可以使用。更多的介绍参见 CSS-Tricks，事实上我还没有用到这个高级功能。

CSS 标准中有关于分页媒质特有属性和选择器 (selector) 的介绍， 然而我试图使用 :first 选择器时发现在 Firefox 9 中并不好使，原因不详。