单色

可以使用monochrome CSS 媒体特性来测试输出设备的单色帧缓冲区中每个像素的位数。

语法

monochrome 特性指定为一个<整数>，表示单色帧缓冲区中每个像素的位数。如果设备不是单色设备，则该值为零。这是一个范围特性，这意味着您还可以使用带前缀的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: #333;
  }
}

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

结果

规范

规范
媒体查询级别 4 # 单色

浏览器兼容性

BCD 表格仅在浏览器中加载