1. Web
  2. CSS
  3. CSS 媒體查詢
  4. 使用媒體查詢

使用媒體查詢

媒體查詢（Media queries）允許你根據裝置的媒體型別（如列印 vs. 螢幕）或其他特性或特徵（如螢幕解析度或方向、寬高比、瀏覽器視口的寬度或高度、使用者偏好（如希望減少動畫、節省流量或啟用透明度））來應用 CSS 樣式。

媒體查詢可用於以下場景：

備註： 本頁面的示例出於演示目的使用了 CSS 的 @media，但所有型別的媒體查詢的基本語法都保持不變。

語法

媒體查詢由一個可選的媒體型別和任意數量的媒體特性表示式組成，這些表示式可以選擇性地透過邏輯運算子以各種方式組合。媒體查詢不區分大小寫。

當媒體型別（如果已指定）與文件正在顯示的裝置匹配，並且所有媒體特性表示式都計算為 true 時，媒體查詢的計算結果為 true。涉及未知媒體型別的查詢總是為 false。

備註： 即使查詢返回 false，附加了媒體查詢的 <link> 標籤引用的樣式表仍然會被下載，下載會發生，但下載的優先順序會低很多。不過，除非查詢結果變為 true，否則其內容不會被應用。你可以在 Tomayac 的部落格文章為什麼瀏覽器會下載媒體查詢不匹配的樣式表中瞭解原因。

指定媒體型別

媒體型別描述了給定裝置的一般類別。雖然網站通常是為螢幕設計的，但你可能希望建立針對特殊裝置（如印表機或基於音訊的螢幕閱讀器）的樣式。例如，此 CSS 針對印表機：

css
@media print {
  /* … */
}

你也可以針對多個裝置。例如，這條 @media 規則使用兩個媒體查詢來同時針對螢幕和列印裝置：

css
@media screen, print {
  /* … */
}

請參閱媒體型別以獲取可用媒體型別的列表。由於媒體型別以非常寬泛的方式描述裝置，最初定義的大多數媒體型別已被廢棄，只剩下 screen、print 和 all。要針對更具體的屬性，請改用媒體特性。

指定媒體特性

媒體特性描述了給定使用者代理、輸出裝置或環境的特定特徵。例如，你可以將特定樣式應用於寬屏顯示器、使用滑鼠的計算機或在低光條件下使用的裝置。此示例在使用者的主要輸入機制（如滑鼠）可以懸停在元素上時應用樣式：

css
@media (hover: hover) {
  /* … */
}

媒體特性分為範圍（range）和離散（discrete）兩類。

離散特性的值取自一個列舉的可能關鍵字值集合。例如，離散特性 orientation 接受 landscape 或 portrait。

css
@media print and (orientation: portrait) {
  /* … */
}

許多範圍特性可以加上“min-”或“max-”字首，以表示“最小條件”或“最大條件”的約束。例如，此 CSS 僅在你的瀏覽器視口寬度等於或小於 1250px 時應用樣式：

css
@media (max-width: 1250px) {
  /* … */
}

以下媒體查詢與上面的示例等效：

css
@media (width <= 1250px) {
  /* … */
}

@media (1250px >= width) {
  /* … */
}

對於媒體查詢的範圍特性，你可以使用包含性的 min- 和 max- 字首，或者更簡潔的範圍語法運算子 <= 和 >=。

以下媒體查詢是等效的：

css
@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

@media (50em >= width >= 30em) {
  /* … */
}

上面的範圍比較是包含性的。要排除比較值，請使用 < 和/或 >。

css
@media (30em < width < 50em) {
  /* … */
}

@media (50em > width > 30em) {
  /* … */
}

如果你建立一個媒體特性查詢而沒有指定值，那麼只要該特性的值不是 0 或 none，巢狀的樣式就會被應用。例如，此 CSS 將應用於任何帶有彩色螢幕的裝置：

css
@media (color) {
  /* … */
}

如果某個特性不適用於瀏覽器正在執行的裝置，那麼涉及該媒體特性的表示式總是為 false。

有關更多媒體特性的示例，請參閱每個具體特性的參考頁面。

建立複雜的媒體查詢

有時你可能想建立一個依賴於多個條件的媒體查詢。這時就需要用到邏輯運算子：not、and 和 only。此外，你可以將多個媒體查詢組合成一個逗號分隔的列表；這允許你在不同情況下應用相同的樣式，其中包含的媒體查詢被評估為邏輯上的 or 組合：解釋為每個媒體查詢都位於括號內，並且它們之間用 or 連線。

在前面的示例中，我們看到了使用 and 運算子將媒體型別與媒體特性分組。and 運算子也可以在單個媒體查詢中組合多個媒體特性。not 運算子對媒體查詢取反，或者當與括號一起使用時對媒體特性取反，基本上顛倒了它們的正常含義。在某些條件下，or 運算子可用於在單個媒體查詢中組合多個媒體特性。最後，only 運算子曾用於防止舊版瀏覽器在不評估媒體特性表示式的情況下應用樣式，但在現代瀏覽器中沒有效果。

備註： 在大多數情況下，當未指定其他型別時，預設使用 all 媒體型別。但是，如果你使用 only 運算子，則必須明確指定媒體型別。你可以看到完整的形式如 only screen 或 only print。

組合多個型別或特性

and 關鍵字將一個媒體特性與一個媒體型別或其他媒體特性組合起來。此示例組合了兩個媒體特性，以將樣式限制在寬度至少為 30 ems 的橫向裝置上：

css
@media (width >= 30em) and (orientation: landscape) {
  /* … */
}

要將樣式限制在帶螢幕的裝置上，你可以將媒體特性連結到 screen 媒體型別：

css
@media screen and (width >= 30em) and (orientation: landscape) {
  /* … */
}

測試多個查詢

你可以使用逗號分隔的媒體查詢列表，當用戶的裝置匹配任何一個媒體型別、特性或狀態時應用樣式。

以下規則包含兩個媒體查詢。如果使用者的裝置高度為 680px 或更高，或者瀏覽器視口處於縱向模式（視口高度大於視口寬度），則該塊的樣式將應用：

css
@media (height >= 680px), screen and (orientation: portrait) {
  /* … */
}

在此示例中，如果使用者正在列印為 PDF 且頁面高度為 800px，則媒體查詢返回 true，因為第一個查詢元件——測試視口高度是否為 680px 或更高——為 true。同樣，如果使用者在縱向模式的智慧手機上，視口高度為 480px，則媒體查詢返回 true，因為第二個查詢元件為 true。

在逗號分隔的媒體查詢列表中，單個媒體查詢在逗號處結束，或者對於列表中的最後一個媒體查詢，在左大括號（{）處結束。

反轉查詢的含義

not 關鍵字反轉單個媒體查詢的含義。例如，此媒體查詢中的 CSS 樣式將應用於除了列印媒體之外的所有媒體：

css
@media not print {
  /* … */
}

not 僅對其應用的媒體查詢取反。不帶括號的 not 會對其所在媒體查詢中的所有特性取反。這意味著，在逗號分隔的媒體查詢列表中，每個 not 都適用於其所在的單個查詢，並應用於該單個查詢內的所有特性。在此示例中，not 適用於第一個媒體查詢 screen and (color)，該查詢在第一個逗號處結束：

css
@media not screen and (color), print and (color) {
  /* … */
}

由於查詢以媒體型別 screen 開頭，因此你不能用括號將 screen and (color) 括起來。另一方面，如果你的媒體查詢僅由特性組成，則你必須將查詢括在括號中：

css
@media not ((width > 1000px) and (color)), print and (color) {
  /* … */
}

括號限制了被取反的查詢元件。例如，要僅對 (width > 1000px) 查詢取反：

css
@media (not (width > 1000px)) and (color), print and (color) {
  /* … */
}

not 僅對其右側的查詢取反。在此示例中，我們對 hover 媒體特性取反，但不對 screen 媒體型別取反：

css
@media screen and not (hover) {
  /* … */
}

如果裝置沒有懸停功能，not (hover) 匹配。在這種情況下，由於其順序，not 適用於 hover 但不適用於 screen。

提高與舊版瀏覽器的相容性

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

css
@media only screen and (color) {
  /* … */
}

使用 or 測試多個特性

你可以使用 or 來測試多個特性中是否有一個匹配，如果任何一個特性為 true，則解析為 true。例如，以下查詢測試具有單色顯示屏或懸停功能的裝置：

css
@media (not (color)) or (hover) {
  /* … */
}

請注意，你不能在與 and 和 not 運算子相同的級別上使用 or 運算子。你可以用逗號分隔媒體特性，或者使用括號將媒體特性的子表示式分組，以闡明求值順序。

例如，以下兩個查詢都是有效的：

css
@media ((color) and (hover)) or (monochrome) {
  /* … */
}

/* or */
@media (color) and (hover), (monochrome) {
  /* … */
}

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.