媒體查詢可用于檢測很多事情，例如：

• viewport(視窗) 的寬度與高度
• 設(shè)備的寬度與高度
• 朝向 (智能手機橫屏，豎屏) 。
• 分辨率

媒體類型

多媒體查詢語法

@media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式。

多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據(jù)條件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) {
    CSS 代碼...;
}

• not: not是用來排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）。
• only: 用來定某種特別的媒體類型。對于支持Media Queries的移動設(shè)備來說，如果存在only關(guān)鍵字，移動設(shè)備的Web瀏覽器會忽略only關(guān)鍵字并直接根據(jù)后面的表達式應(yīng)用樣式文件。對于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時會忽略這個樣式文件。
• all: 所有設(shè)備，這個應(yīng)該經(jīng)?？吹?。

也可以在不同的媒體上使用不同的樣式文件：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="mystyle.css">

媒體功能

【示例1】

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

【示例2】

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

教程來源

更多實例（RUNOOB）