術語和結構

媒體查詢允許基於被稱為媒體型別的裝置/媒體(例如,螢幕,列印或手持)的型別來應用 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 */
}