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>
