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 上查看此页面 • 报告此内容的问题