media type 和 media query

在之前的屏幕大小与视区大小这篇文章中，已经介绍了移动设备的 viewport meta tag。这里介绍与它相关的 media type 和 media query 概念。

CSS2 中可以通过 media type 对不同的浏览情形定义不同的样式。例如：

@media screen {
  body { font-size: 16px }
}
@media print {
  body { font-size: 12pt }
}
@media screen, print {
  body { line-height: 1.5 }
}

上面 CSS 代码将对在正常浏览时设置字体大小为 16pt，而打印时设置字体大小为 12pt。上述两种情形中行高都是 1.5 倍。这个 media type 也可以用于在 html 文件中载入不同的样式表。例如：

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

实际上 media type 还有很多种，但是浏览器多半只支持 all，print，screen 这三种。

随着智能手机和平板电脑的流行，我们需要方便地让网站在不同的设备中显示不同的样式。这时候 CSS3 的 media query 就是我们所需要的。media query 扩展了 media type 的功能，增加了许多属性，如下表：

属性	取值	带 min/max 前缀	说明	例子
device-aspect-ratio	整数/整数	能	设备屏幕的宽高比	@media screen and (device-aspect-ratio: 16/9) {…}
device-height	长度值	能	设备屏幕的高度	@media screen and (device-height: 600px) {…}
device-width	长度值	能	设备屏幕的宽度	@media screen and (device- 800px) {…}
height	长度值	能	浏览界面的高度	@media screen and (min-height: 500px) {…}
width	长度值	能	浏览界面的宽度	@media screen and (min- 700px) {…}
resolution	dpi 值或 dpcm 值	能	像素密度	@media print and (max-resolution: 300dpi) {…}
orientation	portrait 或 landscape	否	竖屏或者横屏	@media all and (orientation:portrait) {…}

其中的 device-height 和 device-width 值在 iOS 设备中始终按照竖屏时给出，而在 Android 设备中会根据竖屏或横屏自动交换。

在 media query 语句中，除了 and 之外，还可以用 not 和 only 关键字。

另外，在 iOS 中还增加了 -webkit-device-pixel-ratio 属性，取值为 1 表示普通屏幕，而取值为 2 表示 Retina 屏幕。在 Android 中也有这个属性，取值为 0.75，1.0 和 1.5 ，分别对应低、中、高像素密度的屏幕。

Media query 大多数浏览器都支持，包括 IE9，Firefox，Chrome，Safari 以及 Opera。只有 IE6-IE8 不支持。