CSS 媒体功能 color-index 用于检测设备的显示器可以表示的颜色数量。它对于区分具有有限颜色功能的设备（例如单色（黑白）显示器）与可以呈现更大范围颜色的设备特别有用。
您还可以使用 min-color-index 和 max-color-index 变体来查询设备可以显示的最小和最大颜色数。
可能的值
- <integer> - 表示输出设备可以显示的颜色数量。
语法
color-index: <integer>;
CSS color-index - <integer>值
以下示例演示了 color-index 媒体功能中，元素默认将具有红色文本颜色。
具有至少 8 个条目的颜色查找表的设备，文本背景将变为紫色。
<html>
<head>
<style>
p {
color: red
}
@media (color-index >= 8) {
p {
background-color: violet;
}
}
</style>
</head>
<body>
<p>CSS Media Feature color-index</p>
</body>
</html>
CSS color-index - max-color-index 属性
以下示例演示了 max-color-index： 1500 媒体功能时，该元素默认具有红色文本颜色。
颜色指数大于 15,000 的设备，元素的文本颜色将为蓝色，背景颜色将变为紫色。
<html>
<head>
<style>
p {
color: red
}
@media (max-color-index: 15000) {
p {
background-color: violet;
color: blue;
}
}
</style>
</head>
<body>
<p>CSS Media Feature max-color-index</p>
</body>
</html>
CSS color-index - min-color-index 属性
以下示例演示了 min-color-index： 256 媒体功能时，该元素默认具有红色文本颜色。
颜色指数小于 256 的设备，元素的文本颜色将为蓝色，背景颜色将变为紫色。
<html>
<head>
<style>
p {
color: red
}
@media (min-color-index: 256) {
p {
background-color: violet;
color: blue;
}
}
</style>
</head>
<body>
<p>CSS Media Feature min-color-index</p>
</body>
</html>
