<media_query_list>：[<media_query>[, <media_query>]*]?
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>：(<media_feature>[:<value>]?)
min和max用于表达大于或等于和小与或等于。如：width会有min-width和max-width媒体查询可以被用在 CSS 中的 @media 和 @import 规则上，也可以被用在 HTML 和 XML 中。
示例代码：
@media screen and (width:800px){ … }
@import url(example.css) screen and (width: 800px);
<link media="screen and (width: 800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width: 800px)" rel="stylesheet" href="example.css" ?> | 媒体特性 | 取值 | 接受min/max | 描述 |
|---|---|---|---|
| width | <length> | yes | 定义输出设备中的页面可见区域宽度 |
| height | <length> | yes | 定义输出设备中的页面可见区域高度 |
| device-width | <length> | yes | 定义输出设备的屏幕可见宽度 |
| device-height | <length> | yes | 定义输出设备的屏幕可见高度 |
| orientation | portrait | landscape | no | 定义输出设备中的页面可见区域高度是否大于或等于宽度。可用于检测设备是横屏还是竖屏 |
| aspect-ratio | <ratio> | yes | 定义页面可见区域宽度与高度的比率 |
| device-aspect-ratio | <ratio> | yes | 定义输出设备的屏幕可见宽度与高度的比率。常见比率：4/3, 16/9, 16/10 |
| color | <integer> | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0 |
| color-index | <integer> | yes | 定义输出设备的颜色查找表中的条目数。如果没有使用颜色查询表，则值等于0 |
| monochrome | <integer> | yes | 定每个单色帧缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| resolution | <resolution> | yes | 定义设备屏幕的像素密度（即屏幕质量）。如：96dpi, 300dpi, 118dpcm |
| device-pixel-ratio | <number> | yes | 非标准特性。部分浏览器不支持resolution特性可使用本特性替代 |
| scan | progressive | interlace | no | 定义电视类设备的扫描工序 |
| grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。1代表是，0代表否 |
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 8.0 | 40.0+ | 40.0+ | 8.0+ | 40.0+ | 8.0+ | 4.4+ | 28.0+ |
| 9.0-11.0#1 | ||||||||
| 12.0-16.0 ? |