CSS 媒体功能 color 测试输出设备的每个颜色分量（如红色、绿色和蓝色）的位数。
CSS 彩色媒体是一个范围功能，这意味着您还可以使用带前缀的 min-color 和 max-color 变体分别查询最小值和最大值。
可能的值
- <integer> - 它定义了用于表示输出设备可以显示的单个颜色（如红色、绿色和蓝色）的位深度。
语法
@media (color:<integer>) {
//css style
}
在表示颜色分量时，它使用表示每个颜色分量所需的最小位数。使用 5 位表示蓝色和红色以及使用 6 位表示绿色的显示器被视为每种颜色分量有 5 位。如果显示器使用索引颜色，则它使用用于表示颜色表中颜色的最小位数。
CSS color - 基本示例
以下示例演示了 CSS 彩色媒体功能，如果输出设备可以显示 0 种以上的颜色，则将 <p> 元素的文本颜色更改为红色 -
<html>
<head>
<style>
div {
color: blue;
background-color: yellow;
}
@media (color) {
div {
color: red;
}
}
</style>
</head>
<body>
<div>
<h2>CSS Media Query</h2>
<p>This is an example of CSS media queries with the "color" media feature.</p>
</div>
</body>
</html>
CSS color - <integer>值
以下示例演示了 color <= 10 媒体特征时，h2 元素默认将具有蓝色文本颜色 −
当设备上可用的每种颜色组件的位数小于或等于 10 时，它会将文本颜色更改为红色，将背景颜色更改为黄色。
<html>
<head>
<style>
h2 {
color: blue;
}
@media (color <= 10) {
h2 {
color: red;
background-color: yellow;
}
}
</style>
</head>
<body>
<h2>CSS Media Feature Color</h2>
</body>
</html>
CSS color - max-color 属性
以下示例演示了 max-color： 8 媒体功能，h2 元素默认具有粉红色背景和蓝色文本颜色 -
当设备上可用的每种颜色组件的位数小于或等于 8 时，它会将文本颜色更改为绿色，将背景颜色更改为黄色。
<html>
<head>
<style>
h2 {
background-color: pink;
color: black;
}
@media (max-color: 8) {
h2 {
background-color: yellow;
color: green;
}
}
</style>
</head>
<body>
<h2>CSS Media Feature Color</h2>
</body>
</html>
CSS color- min-color 属性
以下示例演示了 min-color： 4 媒体功能，h2 元素默认具有粉红色背景和蓝色文本颜色 -
当设备上可用的每种颜色组件的位数大于或等于 4 时，它会将背景颜色更改为紫色。
<html>
<head>
<style>
h2 {
background-color: pink;
color: black;
}
@media (min-color: 4) {
h2 {
background-color: violet;
}
}
</style>
</head>
<body>
<h2>CSS Media Feature Color</h2>
</body>
</html>
