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

[infobox style=’regular’ static=’1′]

Respond.js(https://github.com/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import 命令。因此,建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询:
@media screen and (max-width: 768px) {/*样式*/}

[/infobox]