<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代表否 |
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari |
Android Browser |
Blackberry Browser |
Opera Mobile |
Chrome for Android |
Firefox for Android |
IE Mobile |
UC Browser for Android |
Samsung Internet |
QQ Browser |
Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5-8 | 12+ | 2-3 | 4-25 #1 | 3.1-3.2 #1 | 9 | 3.2-6.1 #1 | 2.1-4.3 #1 | 7+ | 10+ | 61 | 56 | 10-11 #1 | 11.4 | 4+ | 1.2 | 7.12 |
| 9-11 #1 | 3.5+ | 26+ | 4-6 #1 | 9.5+ | 7.0+ | 4.4+ | ||||||||||
| 6.1+ |