CSS 媒体特性 - dynamic-range



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

某些设备能够显示高动态范围内容,但此高动态范围功能并非始终处于活动状态。有时,您、用户或屏幕上显示的内容需要告诉设备显示这些鲜艳的颜色。此媒体特性仅检查设备是否具有 HDR 功能,而不检查它当前是否已启用。

可能的值

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

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

语法

dynamic-range: standard|high;

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS dynamic-range - standard 值

以下示例演示如何使用dynamic-range: standard媒体特性来更改标准动态范围设备上 h2 元素的颜色:

Open Compiler
<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) 的设备上以红色显示:

Open Compiler
<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>
广告