CSS 媒體特性 - 單色

CSS 的monochrome 媒體特性用於確定輸出裝置的單色幀緩衝區中每個畫素表示所使用的位數。

monochrome 媒體特性是一個範圍特性，您可以使用 min-monochrome 和 max-monochrome 變體來查詢最小值和最大值。

單色裝置僅以一種顏色顯示內容，通常為黑白，例如單色顯示器、印表機、電子書閱讀器等。

可能的值

<integer> - 此整數值表示分配給單色幀緩衝區中每個畫素的位數。對於非單色裝置，該值為零。

語法

monochrome: <integer>

CSS monochrome - 零值

以下示例演示瞭如何使用 monochrome 媒體特性以 0 的值來定位非單色（彩色）裝置。對於此類裝置，元素的背景顏色將更改為紫色 -

<html>
<head>
<style>
   .monochrome-box {
      width: 150px;
      height: 100px;
      background-color: pink;
   }
   @media (monochrome: 0) {
      .monochrome-box {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>

CSS monochrome - <integer> 值

當 monochrome 媒體特性檢測到每個畫素 3 位的單色幀緩衝區時，元素將具有紫色背景顏色。在其他裝置上，元素將具有粉紅色背景顏色。

這是一個示例 -

<html>
<head>
<style>
   .monochrome-box {
      width: 150px;
      height: 100px;
      background-color: pink;
   }
   @media (monochrome: 3) {
      .monochrome-box {
         background-color: violet;
      }
   }
</style>
</head>
<body>
   <div class="monochrome-box">CSS Media Feature Monochrome</div>
</body>
</html>

列印頁面