CSS 媒体特性 - dynamic-range

CSS 媒体功能 dynamic-range 允许您确定用户代理和输出设备是否支持高亮度、对比度和颜色深度。

某些设备能够显示高动态范围内容，但这种高动态范围功能并未始终处于活动状态。有时，您（用户或屏幕上显示的内容）需要告诉设备显示这些鲜艳的颜色。此媒体功能仅检查设备是否支持 HDR，而不检查设备当前是否已打开。

可能的值

standard− 匹配支持标准动态范围的用户代理和输出设备。
high − 匹配支持高动态范围的用户代理和输出设备。

语法


dynamic-range: standard|high;

CSS dynamic-range - standard 值

以下示例演示了如何使用 dynamic-range： standard 在标准动态范围设备上更改 h2 元素的颜色 -


<html>
<head>
<style>
	 	h2 {
	 	 	 color: blue;
	 	}
	 	@media (dynamic-range: standard) {
	 	 	 h2 {
	 	 	 	 	color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h2>CSS Media Feature dynamic-range: standard</h2>
</body>
</html>

CSS dynamic-range - high 值

以下示例演示了如何使用媒体功能 Dynamic-range： high 在所有设备上以蓝色显示 h2 元素，但在支持高动态范围（HDR）的设备上以红色显示 -


<html>
<head>
<style>
	 	h2 {
	 	 	 color: blue;
	 	}
	 	@media (dynamic-range: high) {
	 	 	 h2 {
	 	 	 	 	color: red;
	 	 	 }
	 	}
</style>
</head>
<body>
	 	<h2>CSS Media Feature dynamic-range: high</h2>
</body>
</html>

打印本页