一、特性
| Media Features 媒体特性 | Value 取值 | Accepts min/max 接受min/max | Description 简介 |
| width | <length> | yes | 定义输出设备中的页面可见区域宽度 |
| height | <length> | yes | 定义输出设备中的页面可见区域高度 |
| device-width | <length> | yes | 定义输出设备的屏幕可见宽度 |
| device-height | <length> | yes | 定义输出设备的屏幕可见高度 |
| orientation | portrait | landscape | no | 定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否 |
| aspect-ratio | <ratio> | yes | 定义'width'与'height'的比率 |
| device-aspect-ratio | <ratio> | yes | 定义'device-width'与'device-height'的比率。如常见的显示器比率：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 |
| scan | progressive | interlace | no | 定义电视类设备的扫描工序 |
| grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否 |
二、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
@media all and (min-width: 500px) and (max-width: 1000px) {
body {
color: #f00;
}
}
</style>
</head>
<body>
<div class="test">当页面可见宽度大于500px小于1000px时，本行文字显示为红色。试着调整你的viewport使得页面宽度介于这个区间以查看效果</div>
</body>
</html> 
