CSS-常用媒体查询

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像素的显示屏设备。

巴特西

CSS-常用媒体查询

最新文章

热门文章