一、特性
| 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> 
