媒体查询是响应式网站设计中不可少的，它能够检测用户浏览器或设备的一些有用信息，以便让我们为用户提供一套最合适的渲染样式。创建媒体查询时，最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。不过还有其他很多可供媒体查询检测的特性，下面是一个总结，分享的同时也方便自己查阅。
|
媒体特性 |
说明 |
|
width |
视口宽度，即输出设备目标显示区域的宽度。 |
| height | 视口高度，即输出设备目标显示区域的高度。 |
| device-width | 渲染表面的宽度，即设备屏幕的宽度。 |
| device-height | 渲染表面的高度，即设备屏幕的高度。 |
| orientation | 设备处于横向还是纵向。 |
| aspect-ratio | 视口宽度和高度的宽高比。 |
| device-aspect-ratio | 渲染表面宽度和高度的宽高比。 |
| color | 设备上每种颜色的位数。 |
| color-index | 设备的颜色索引表中的颜色数。 |
| monochrome | 单色帧缓冲区中每像素所使用的位数。 |
| resolution | 输出设备的分辨率。dpi值或dpcm（每厘米像素点数的度量值）值。 |
| scan |
TV输出设备的扫描方式。 值可设为progressive（逐行扫描）或interlace（隔行扫描）。 |
| grid | 查询输出设备是等宽（值为1）还是位图（值为0）。 |
在上述所有特性中，除scan和grid之外，都可使用min和max前缀来创建一个查询范围。
参考文档：
