CSS 媒体功能 monochrome 用于确定用于表示输出设备的单色帧缓冲区中每个像素的位数。
媒体功能 monochrome 是一个范围功能，您可以使用最小单色和最大单色变体来查询最小值和最大值。
单色设备仅以一种颜色显示内容，通常是黑白，例如单色显示器、打印机、电子书阅读器,..等。
可能的值
- <integer> − 此整数值表示分配给单色帧缓冲区中每个像素的位数。对于非单色设备，该值为零。
语法
monochrome: <integer>
CSS monochrome- 零值
以下示例演示如何使用媒体功能 monochrome 来定位值为 0 的非单色（彩色）设备。对于此类设备，元素的背景颜色更改为紫色 -
<html>
<head>
<style>
.monochrome-box {
width: 150px;
height: 100px;
background-color: pink;
}
@media (monochrome: 0) {
.monochrome-box {
background-color: violet;
}
}
</style>
</head>
<body>
<div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>
CSS monochrome- <integer>值
当媒体功能 monochrome 检测到每像素 3 位的单色帧缓冲区时，元素将具有紫色背景色。在其他设备上，该元素将具有粉红色的背景颜色。
这是一个例子 -
<html>
<head>
<style>
.monochrome-box {
width: 150px;
height: 100px;
background-color: pink;
}
@media (monochrome: 3) {
.monochrome-box {
background-color: violet;
}
}
</style>
</head>
<body>
<div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>
