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>

列印頁面