monochrome

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

monochrome CSS 媒體特性可用於測試輸出裝置的單色幀緩衝區中每畫素的位數。

語法

monochrome 特性被指定為 <integer>，表示單色幀緩衝區中每畫素的位數。如果裝置不是單色裝置，則值為零。這是一個範圍特性，這意味著你也可以使用字首 min-monochrome 和 max-monochrome 變體分別查詢最小值和最大值。

示例

HTML

html

<p class="mono">Your device supports monochrome pixels!</p>
<p class="no-mono">Your device doesn't support monochrome pixels.</p>

CSS

css

p {
  display: none;
}

/* Any monochrome device */
@media (monochrome) {
  p.mono {
    display: block;
    color: #333333;
  }
}

/* Any non-monochrome device */
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}

結果

規範

規範
媒體查詢第 4 級 # monochrome

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面上次修改於 2025年8月13日由 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題