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>

打印页面