媒体查询能检测那些特性
创建媒体查询时，最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。
依我的经验，很少需要检测其他特性。但是，为方便查阅，下面列出了所有可供媒体查
询检测的特性，希望其中有能让你心动的特性。
width：视口宽度。
height：视口高度。
device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
orientation：检查设备处于横向还是纵向。
aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样
定义aspect-ratio: 16/9。
device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的
宽高比。
color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。
color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如
monochrome: 2。
resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还
可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔
行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，
而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。
grid：用来检测输出设备是网格设备还是位图设备。
在上述所有特性中，除scan 和grid 之外，都可使用min 和max 前缀来创建一个查询范围。
例如，分析如下所示的代码片段：
@import url("phone.css") screen and (min-width:200px) and (max-width:360px);
这里对width 应用了min 和max 来设定查询范围。这样phone.css 文件只会引入视口
宽度介于200 像素至360 像素的显示屏设备。