CSS 媒体功能 - color

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>

打印本页