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-width: 800px) {…}
height	长度值	能	浏览界面的高度	@media screen and (min-height: 500px) {…}
width	长度值	能	浏览界面的宽度	@media screen and (min-width: 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 不支持。

参考资料：
[1] CSS 2.1 : Media types - W3C
[2] @media - CSS | MDN
[3] CSS 3 : Media Queries - W3C
[4] CSS media queries - CSS | MDN
[5] Media Queries (Internet Explorer) - MSDN
[6] Media queries - Wikipedia, the free encyclopedia
[7] media type与media query | CSS | 前端观察
[8] CSS3 Media Queries (媒体查询) | Kayo's Melody
[9] Use CSS3 Media Queries To Create a Mobile Website
[A] First, Understand Your Screen (result table)
[B] Combining meta viewport and media queries - QuirksBlog
[C] Targeting Device Density with CSS - Android Developers
[D] Safari CSS Reference: Supported CSS Rules
[E] CSS WG Blog - How to unprefix -webkit-device-pixel-ratio
[F] devicePixelRatio - QuirksBlog
[G] Can I use CSS3 Media Queries
[H] Combining meta viewport and media queries - QuirksBlog