CSS媒体特性 - 颜色



CSS媒体特性color测试输出设备每个颜色分量(如红色、绿色和蓝色)的比特数。

CSS颜色媒体是一个范围特性,这意味着你也可以使用前缀min-colormax-color变体分别查询最小值和最大值。

可能的值

  • <integer> − 它定义了用于表示输出设备可以显示的各个颜色(例如红色、绿色和蓝色)的比特深度。

语法

   @media (color:<integer>) {
      //css style
   }
表示颜色分量时,它使用表示每个颜色分量所需的最小比特数。一个对蓝色和红色使用5位,对绿色使用6位的显示器被认为每个颜色分量有5位。如果显示器使用索引颜色,则它使用表示颜色表中颜色的最小比特数。

CSS颜色 - 基本示例

下面的示例演示了CSS color媒体特性,如果输出设备可以显示超过0种颜色,则将<p>元素的文本颜色更改为红色−

<html>
<head>
<style>
   div {
      color: blue;
      background-color: yellow;
   }
   @media (color) {
      div {
         color: red;
      }
   }
</style>
</head>
<body>
   <div>
      <h2>CSS Media Query</h2>
      <p>This is an example of CSS media queries with the "color" media feature.</p>
   </div>
</body>
</html>

CSS颜色 - <integer>值

下面的示例演示了color <= 10媒体特性,h2元素默认将具有蓝色文本颜色−

当设备上可用的每个颜色分量的比特数小于或等于10时,它会将文本颜色更改为红色,背景颜色更改为黄色。
<html>
<head>
<style>
   h2 {
      color: blue;
   }
   @media (color <= 10) {
      h2 {
         color: red;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>   

CSS颜色 - max-color属性

下面的示例演示了max-color: 8媒体特性,h2元素默认将具有粉色背景和蓝色文本颜色−

当设备上可用的每个颜色分量的比特数小于或等于8时,它会将文本颜色更改为绿色,背景颜色更改为黄色。
<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (max-color: 8) {
      h2 {
         background-color: yellow;
         color: green;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>

CSS颜色 - min-color属性

下面的示例演示了min-color: 4媒体特性,h2元素默认将具有粉色背景和蓝色文本颜色−

当设备上可用的每个颜色分量的比特数大于或等于4时,它会将背景颜色更改为紫色。
<html>
<head>
<style>
   h2 {
      background-color: pink;
      color: black;
   }
   @media (min-color: 4) {
      h2 {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <h2>CSS Media Feature Color</h2>
</body>
</html>   
广告