CSS 媒體查詢

CSS2 引入了媒體類型

CSS2 中引入了 @media 規則，它讓為不同媒體類型定義不同樣式規則成為可能。

例如：您可能有一組用于計算機屏幕的樣式規則、一組用于打印機、一組用于手持設備，甚至還有一組用于電視，等等。

不幸的是，除了打印媒體類型之外，這些媒體類型從未得到過設備的大規模支持。

CSS3 引入了媒體查詢

CSS3 中的媒體查詢擴展了 CSS2 媒體類型的概念：它們并不查找設備類型，而是關注設備的能力。

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

  • 視口的寬度和高度
  • 設備的寬度和高度
  • 方向（平板電腦/手機處于橫向還是縱向模式）
  • 分辨率

使用媒體查詢是一種流行的技術，可以向臺式機、筆記本電腦、平板電腦和手機（例如 iPhone 和 Android 手機）提供定制的樣式表。

瀏覽器支持

表格中的數字注明了完全支持 @media 規則的首個瀏覽器版本。

屬性
@media 21.0 9.0 3.5 4.0 9.0

媒體查詢語法

媒體查詢由一種媒體類型組成，并可包含一個或多個表達式，這些表達式可以解析為 true 或 false。

@media not|only mediatype and (expressions) {
  CSS-Code;
}

如果指定的媒體類型與正在顯示文檔的設備類型匹配，并且媒體查詢中的所有表達式均為 true，則查詢結果為 true。當媒體查詢為 true 時，將應用相應的樣式表或樣式規則，并遵循正常的級聯規則。

除非您使用 not 或 only 運算符，否則媒體類型是可選的，且隱含 all 類型。

您還可以針對不同的媒體使用不同的樣式表：

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

CSS3 媒體類型

值 描述
all 用于所有媒體類型設備。
print 用于打印機。
screen 用于計算機屏幕、平板電腦、智能手機等等。
speech 用于大聲“讀出”頁面的屏幕閱讀器。

媒體查詢的簡單實例

使用媒體查詢的一種方法是在樣式表內有一個備用的 CSS 部分。

下面的例子在視口寬度為 480 像素或更寬時將背景顏色更改為淺綠色（如果視口小于 480 像素，則背景顏色會是粉色）：

實例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

親自試一試

下例顯示了一個菜單，如果視口的寬度為 480 像素或更寬，則該菜單會浮動到頁面的左側（如果視口小于 480 像素，則該菜單將位于內容的頂部）：

實例

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

親自試一試

更多媒體查詢實例

如需更多媒體查詢的實例，請訪問下一頁：CSS MQ 實例。

CSS @media 參考手冊

有關所有媒體類型和特性/表達式的完整概述，請查看我們的 CSS 參考中的 @media 規則。