CSS媒體特性 - 顏色

CSS媒體特性color測試輸出裝置每個顏色分量（如紅色、綠色和藍色）的位元數。

CSS顏色媒體是一個範圍特性，這意味著你也可以使用字首min-color和max-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>

列印頁面