css3 媒体查询能检测那些特性

媒体查询能检测那些特性

创建媒体查询时，最常用的是设备的视口宽度（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 像素的显示屏设备。