CSS @media 規則

定義和用法

@media 規則在媒體查詢中用于為不同的媒體類型/設備應用不同的樣式。

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

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

使用媒體查詢是一種流行的技術，用于向臺式機、筆記本電腦、平板電腦和手機提供定制的樣式表（響應式網頁設計）。

您還可以使用媒體查詢來規定某些樣式僅適用于打印的文檔或屏幕閱讀器（mediatype：print、screen 或 speech）。

除了媒體類型之外，還有媒體特性。媒體特性通過允許測試用戶代理或顯示設備的具體特性，為媒體查詢提供了更多特定細節。例如，您可以將樣式僅應用于大于或小于特定寬度的屏幕。

另請參閱：

CSS 教程：CSS 媒體查詢

CSS 教程：CSS 媒體查詢實例

RWD 教程：通過媒體查詢實現響應式 Web 設計

JavaScript 參考手冊：window.matchMedia() 方法

實例

例子 1

如果瀏覽器窗口的寬度為 600px 或更小時，把 <body> 元素的背景顏色更改為“淺藍色”：

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

親自試一試

可以在頁面下方找到更多 TIY 實例。

CSS 語法

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

not、only 和 and 關鍵字的含義：

not：not 關鍵字反正整個媒體查詢的含義。

only：only 關鍵字可防止舊版瀏覽器應用指定的樣式，這些瀏覽器不支持帶媒體特性的媒體查詢。它對現代瀏覽器沒有影響。

and：and 關鍵字將媒體特性與媒體類型或其他媒體特性組合在一起。

它們都是可選的。但是，如果使用 not 或 only，則還必須指定媒體類型。

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

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

媒體類型

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

媒體特性

值 描述
any-hover

是否有任何可用的輸入機制允許用戶（將鼠標等）懸停在元素上？

在 Media Queries Level 4 中被添加。
any-pointer

可用的輸入機制中是否有任何指針設備，如果有，它的精度如何？

在 Media Queries Level 4 中被添加。
aspect-ratio 視口（viewport）的寬高比。
color

輸出設備每個像素的比特值，常見的有 8、16、32 位。

如果設備不支持輸出彩色，則該值為 0。
color-gamut

用戶代理和輸出設備大致程度上支持的色域。

在 Media Queries Level 4 中被添加。
color-index

輸出設備的顏色查詢表（color lookup table）中的條目數量。

如果設備不使用顏色查詢表，則該值為 0。
device-aspect-ratio

輸出設備的寬高比。

已在 Media Queries Level 4 中被棄用。
device-height

輸出設備渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被棄用。
device-width

輸出設備渲染表面（如屏幕）的寬度。

已在 Media Queries Level 4 中被棄用。
display-mode

應用程序的顯示模式，如 web app 的 manifest 中的 display 成員所指定

在 Web App Manifest spec 被定義。
forced-colors

檢測是用戶代理否限制調色板。

在 Media Queries Level 5 中被添加。
grid 輸出設備使用網格屏幕還是點陣屏幕？
height 視口（viewport）的高度。
hover

主輸入機制是否允許用戶將鼠標懸停在元素上？

在 Media Queries Level 4 中被添加。
inverted-colors

瀏覽器或者底層操作系統是否反轉了顏色。

在 Media Queries Level 5 中被添加。
light-level

當前環境光水平。

在 Media Queries Level 5 中被添加。
max-aspect-ratio 顯示區域的寬度和高度之間的最大比例。
max-color 輸出設備每個顏色分量的最大位數。
max-color-index 設備可以顯示的最大顏色數。
max-height 顯示區域的最大高度，例如瀏覽器窗口。
max-monochrome 單色（灰度）設備上每種“顏色”的最大位數。
max-resolution 設備的最大分辨率，使用 dpi 或 dpcm。
max-width 顯示區域的最大寬度，例如瀏覽器窗口。
min-aspect-ratio 顯示區域的寬度和高度之間的最小比例。
min-color 輸出設備每個顏色分量的最小位數。
min-color-index 設備可以顯示的最小顏色數。
min-height 顯示區域的最小高度，例如瀏覽器窗口。
min-monochrome 單色（灰度）設備上每種“顏色”的最小位數。
min-resolution 設備的最低分辨率，使用 dpi 或 dpcm。
min-width 顯示區域的最小寬度，例如瀏覽器窗口。
monochrome

輸出設備單色幀緩沖區中每個像素的位深度。

如果設備并非黑白屏幕，則該值為 0。
orientation 視窗（viewport）的旋轉方向（橫屏還是豎屏模式）。
overflow-block

輸出設備如何處理沿塊軸溢出視口(viewport)的內容。

在 Media Queries Level 4 中被添加。
overflow-inline

沿內聯軸溢出視口(viewport)的內容是否可以滾動？

在 Media Queries Level 4 中被添加。
pointer

主要輸入機制是一個指針設備嗎？如果是，它的精度如何？

在 Media Queries Level 4 中被添加。
prefers-color-scheme

探測用戶傾向于選擇亮色還是暗色的配色方案。

在 Media Queries Level 5 中被添加。
prefers-contrast

探測用戶是否有向系統要求提高或降低相近顏色之間的對比度。

在 Media Queries Level 5 中被添加。
prefers-reduced-motion

用戶是否希望頁面上出現更少的動態效果。

在 Media Queries Level 5 中被添加。
prefers-reduced-transparency

用戶是否傾向于選擇更低的透明度。

在 Media Queries Level 5 中被添加。
resolution 輸出設備的分辨率，使用 dpi 或 dpcm。
scan 輸出設備的掃描過程（適用于電視等）。
scripting

探測腳本（例如 JavaScript）是否可用。

在 Media Queries Level 5 中被添加。
update

輸出設備更新內容的渲染結果的頻率。

在 Media Queries Level 4 中被添加。
width 視窗（viewport）的寬度。

更多實例

例子 2

當瀏覽器的寬度為 600px 或更小時，隱藏元素：

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

親自試一試

例子 3

如果視口的寬度為 800 像素或更寬，請使用媒體查詢將背景色設置為淡紫色；如果視口的寬度介于 400 至 799 像素之間，則使用媒體查詢將背景色設置為淺綠色。如果視口小于 400 像素，則背景色為淺藍色：

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

親自試一試

例子 4

創建一個響應式導航菜單（在大屏幕上水平顯示，在小屏幕上垂直顯示）：

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

親自試一試

例子 5

使用媒體查詢來創建響應式列布局：

/* 在 992px 或更小的屏幕上，從四列變為兩列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在寬度小于或等于 600 像素的屏幕上，使各列堆疊，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

親自試一試

例子 6

使用媒體查詢來創建響應式網站：

親自試一試

例子 7

媒體查詢還可以用于根據瀏覽器的方向更改頁面的布局。您可以寫一組 CSS 屬性，這些屬性僅在瀏覽器窗口的寬度大于其高度（即“橫屏”方向）時才適用。

如果方向處于橫屏模式，則使用淺藍色背景色：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

親自試一試

例子 8

使用媒體查詢將文本顏色設置為在屏幕上顯示文檔時為綠色，在打印時為黑色：

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

親自試一試

例子 9

逗號分隔的列表：使用逗號將另一個媒體查詢添加到已存在的媒體查詢中（它的行為類似 OR 運算符）：

/* 當寬度介于 600px 和 900px 之間或大于 1100px 時 - 改變 <div> 的外觀 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

親自試一試

瀏覽器支持

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

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9