CSS媒體查詢（@media）全面解析

随着移動設備的快速普及，用戶不再隻是通過傳統的電腦系來浏覽 Web 内容，越來越多的用戶開始使用各種尺寸的智能手機、平闆電腦或者其它設備來浏覽 Web 内容，爲了确保使用不同設備的用戶都能擁有不錯的體驗就需要用到媒體查詢。

媒體查詢是 CSS 樣式表最重要的功能之一，所謂媒體查詢指的就是根據不同的媒體類型（設備類型）和條件來區分各種設備（例如：電腦、手機、平闆電腦、盲文設備等），并爲它們分别定義不同的 CSS 樣式。媒體查詢能讓 CSS 可以更精确的作用于不同的設備或同一設備的不同條件，讓所有用戶都能得到很好的用戶體驗。

1. 媒體類型

媒體類型用來表示設備的類别，CSS 中提供了一些關鍵字來表示不同的媒體類型，如下表所示：

2. 媒體特性

除了具體的類型外，還可以通過一些屬性來描述設備的具體特征，例如寬度、高度、分辨率等，如下表所示：

3. 邏輯操作符

邏輯操作符包含 not、and 和 only 三個，通過邏輯操作符可以構建複雜的媒體查詢，您還可以通過逗号來分隔多個媒體查詢，将它們組合爲一個規則。

• and：用于将多個媒體查詢組合成一條媒體查詢，當每個查詢規則都爲真時則該條媒體查詢爲真，另外通過 and 操作符還可以将媒體特性與媒體類型結合在一起；
• not：用于否定媒體查詢，當查詢規則不爲真時則返回 true，否則返回 false。如果使用 not 操作符，則還必須指定媒體類型；
• only：僅在整個查詢匹配時才會生效，當不使用 only 時，舊版的浏覽器會将 screen and (max-width: 500px) 簡單地解釋爲 screen，忽略查詢的其餘部分，并将樣式應用于所有屏幕。 如果使用 only 運算符，則還必須指定媒體類型。

  4. 定義媒體查詢

  目前您可以通過以下兩種方式來定義媒體查詢：

  • 使用 @media 或 @import 規則在樣式表中指定對應的設備類型；
  • 用 media 屬性在 、、 或其他 HTML 元素中指定特定的設備類型。

    1) @media

    在《CSS @規則》一節中我們已經簡單了解 @media，使用 @media 您可以指定一組媒體查詢和一個 CSS 樣式塊，當且僅當媒體查詢與正在使用的設備匹配時，指定的 CSS 樣式才會應用于文檔。示例代碼如下：

    Python

    /* 在小于或等于 992 像素的屏幕上，将背景色設置爲藍色 */
    @media screen and (max-width: 992px) {
      body {
        background-color: blue;
      }
    }
     
    /* 在 600 像素或更小的屏幕上，将背景色設置爲橄榄色 */
    @media screen and (max-width: 600px) {
      body {
        background-color: olive;
      }
    }

    2) @import

    @import 用來導入指定的外部樣式文件并指定目标的媒體類型，示例代碼如下：

    Python

    @import url("css/screen.css") screen;   /* 引入外部樣式，該樣式僅會應用于電腦顯示器 */
    @import url("css/print.css") print;     /* 引入外部樣式，該樣式僅會應用于打印設備 */
    body {
        background: #f5f5f5;
        line-height: 1.2;
    }

    注意：所有 @import 語句都必須出現在樣式表的開頭，而且在樣式表中定義的樣式會覆蓋導入的外部樣式表中沖突的樣式。

    3) media 屬性

    您還可以在 、、 等标簽的 media 屬性中來定義媒體查詢，示例代碼如下：

    Python

    /* 當頁面寬度大于等于 900 像素時應用該樣式 */
    
    /* 當頁面寬度小于等于 600 像素時應用該樣式 */
    

     提示：在 media 屬性中您還可以指定多種媒體類型，每種媒體類型之間使用逗号進行分隔，例如 media="screen, print"。