CSS 媒体特性 - color-gamut

CSS 媒体特性color-gamut用于检测设备显示器能够再现的颜色范围。

color-gamut帮助 Web 开发人员创建针对用户设备色域优化的样式和布局。

可能的值

srgb - 此值针对能够显示标准 sRGB 色域的设备，sRGB 是大多数消费类显示器中使用的标准色彩空间。sRGB 表示颜色范围有限，在许多设备上很常见。
p3 - 此值表示设备至少可以显示与 Display P3 色彩空间一样多的颜色，甚至更多。Display P3 色彩空间比 sRGB 具有更广的色域，可以显示更多颜色。它常见于某些现代 iPhone 和高质量显示器等设备。
rec2020 - 此设备至少可以显示与 ITU-R 建议 BT.2020 色彩空间一样多的颜色，该色彩空间比 P3 色域具有更广的颜色范围。它通常与高端显示器和媒体制作相关联。

语法

color-gamut: srgba|p3|rec2020;

CSS color-gamut - srgb 值

以下示例演示了如何在 CSS 中使用color-gamut: srgb媒体特性来定位具有 srgb 色域的设备。当色域为 srgb 时，文本将为红色，背景颜色将变为黄色 -

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: srgb) {
      p {
         background-color: yellow;
         color: red;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: srgb</p>
</body>
</html>

CSS Color-gamut - p3 值

以下示例演示了color-gamut: p3媒体特性，p 元素默认将具有粉红色背景颜色和黑色文本颜色。

支持 p3 色域的设备，p 元素的背景颜色将更改为绿色，并带有紫色边框。

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: p3) {
      p {
         background-color: green;
         border: 3px solid violet;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: p3</p>
</body>
</html>

CSS color-gamut - rec2020 值

以下示例演示了color-gamut: rec2020媒体特性，p 元素默认将具有粉红色背景颜色和黑色文本颜色。

支持 rec2020 色域的设备，p 元素的背景颜色将更改为紫色，文本颜色为蓝色。

<html>
<head>
<style>
   p {
      background-color: pink;
      color: black;
   }
   @media (color-gamut: rec2020) {
      p {
         background-color: violet;
         color: blue;
      }
   }
</style>
</head>
<body>
   <p>CSS Media Feature color-gamut: rec2020</p>
</body>
</html>

打印页面