术语和结构

媒体查询允许基于被称为媒体类型的设备/媒体（例如，屏幕，打印或手持）的类型来应用 CSS 规则，设备的其他方面用诸如颜色或视口尺寸的可用性之类的媒体特征来描述。

媒体查询的一般结构

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

包含媒体类型的媒体查询

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

包含媒体类型和媒体功能的媒体查询

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

包含媒体功能的媒体查询（以及隐含的媒体类型全部）

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}