媒体特性包括13种，接受单个的逻辑表达式作为值，或者没有值。大部分特性接受min或max的前缀，用来表示大于等于，或者小于等于的逻辑，以此避免使用大于号（>）和小于号（<）字符。下面是各种媒体特性的简单说明：
颜色（color）
指定输出设备每个像素单元的比特值。接受 min/max 前缀。例如，向每个颜色单元至少有4个比特的设备应用样式表：
@media all and (min-color: 4) { ... }
颜色索引（color-index）
指定输出设备中颜色查询表中的条目数量。接受 min/max 前缀。例如，向所有使用索引颜色的设备应用样式表：
@media all and (color-index) { ... }
宽高比（aspect-ratio）
指定输出设备目标显示区域的宽高比。取值包含两个以“/”分隔的正整数，代表水平像素数与垂直像素数的比例。接受 min/max 前缀。例如，下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表：
@media screen and (min-aspect-ratio: 1/1) { ... }
设备宽高比（device-aspect-ratio）
指定输出设备的宽高比。接受 min/max 前缀。例如，下面为宽屏设备选择了一个特殊的样式表。
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
设备高度（device-height）
指定输出设备的高度。接受 min/max前缀。例如，在最大宽度800px的屏幕上应用样式表：
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
设备宽度（device-width）
指定输出设备的宽度。接受 min/max前缀。
网格（grid）
判断输出设备是网格设备还是位图设备。如果设备是基于网格的（如电传打字机），该值为1，否则为0。例如，向一个15字符宽度或更窄的手持设备应用样式：
@media handheld and (grid) and (max-width: 15em) { ... }
高度（height）
指定输出设备渲染区域的高度。接受 min/max前缀。
黑白（monochrome）
指定一个黑白设备每个像素的比特数。接受 min/max 前缀。例如，向所有黑白设备应用样式表：
@media all and (monochrome) { ... }
方向（orientation）
指定设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。取值包括landscape（横屏）和portrait（竖屏）。例如，向竖屏设备应用样式表：
@media all and (orientation: portrait) { ... }
分辨率（resolution）
指定输出设备的分辨率。接受 min/max前缀。例如，为每英寸至少300点的打印机应用样式：
@media print and (min-resolution: 300dpi) { ... }
扫描（scan）
指定电视输出设备的扫描过程。取值包括：progressive和interlace（交错）。例如，向以顺序方式扫描的电视机上应用样式表：
@media tv and (scan: progressive) { ... }
宽度（width）
指定输出设备渲染区域的宽度。接受 min/max 前缀。例如，向宽度在500px和800px之间的屏幕应用样式表：
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
在CSS样式的开头必须定义@media关键字，然后指定媒体类型，再指定媒体特性。媒体特性的格式与样式的格式相似，分为两部分，由冒号分隔，冒号前指定媒体特性，冒号后指定该特性的值。
例如，下面语句指定了当设备显示屏幕宽度小于640px时所使用的样式。
@media screen and (max-width: 639px) {
/*样式代码*/
}
可以使用多个媒体查询将同一个样式应用于不同的媒体类型和媒体特性中，媒体查询之间通过逗号分隔，类似于选择器分组。
@media handheld and (min-width:360px),screen and (min-width:480px) {
/*样式代码*/
}
可以在表达式中加上not、only和and等逻辑运算符。
//下面样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中。
@media not handheld and (color) {
/*样式代码*/
}
//下面样式代码将被使用在所有非彩色设备中
@media all and (not color) {
/*样式代码*/
}
only运算符能够让那些不支持媒体查询，但是支持媒体类型的设备，将忽略表达式中的样式。例如：
@media only screen and (color) {
/*样式代码*/
}
对于支持媒体查询的设备来说，能够正确地读取其中的样式，仿佛only运算符不存在一样；对于不支持媒体查询，但支持媒体类型的设备（如IE8）来说，可以识别@media screen关键字，但是由于先读取的是only运算符，而不是screen关键字，将忽略这个样式。
【提示】
媒体查询也可以用在@import规则和<link>标签中。例如：
@import url(example.css) screen and (width:800px);
//下面代码定义了如果页面通过屏幕呈现，且屏幕宽度不超过480px，则加载shetland.css样式表。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />