CSS 資料型別 - <resolution>

CSS 資料型別 <resolution> 在媒體查詢中使用時，表示輸出裝置（例如其解析度）的畫素密度。

螢幕的單位不是使用物理測量值，而是使用 CSS 英寸、釐米或畫素。

單位

dpi - 表示每英寸點數。列印文件的每英寸點數 (dpi) 通常遠高於螢幕，螢幕通常為 72 或 96 dpi。一英寸相當於 2.54 釐米，因此一個 dpi 大約相當於 0.39 個點每釐米 (dpcm)。
dpcm - 表示每釐米點數。由於一英寸相當於 2.54 釐米，因此一個點每釐米 (dpcm) 大約相當於 2.54 個點每英寸 (dpi)。
dppx - 表示每 px 點數。由於 CSS in 和 CSS px 之間固定的 1:96 比例，一個點每畫素 (dppx) 等於 96 個點每英寸 (dpi)，這對應於 CSS 中顯示的影像的預設解析度，如 image-resolution 所指定。
x - dppx 的別名。

語法

在 <resolution> 資料型別中，列出的單位後跟一個正值 <number>。單位符號和數字之間不應有空格，就像所有其他 CSS 尺寸一樣。

CSS <resolution> - 基本示例

以下示例演示了 CSS 資料型別 <resolution> 的用法。

<html>
<head>
<style>
   div {
      margin: 10px;
      background-color: aqua;
   }
   @media (min-resolution: 80dpi) {
      .box1 {
         background-color: red;
      }
   }
   @media (max-resolution: 300dpi) {
      .box2 {
         background-color: yellow;
      }
   }
   @media (resolution: 96dpi) {
      .box3 {
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <div class="box1">This box will have a red background when the screen resolution is at least 80dpi.</div>
   <div class="box2">This box will have a yellow background for devices with a maximum resolution of 300dpi.</div>
   <div class="box3">This box will have a pink background when the screen resolution is exactly 96dpi.</div>
</body>
</html>

列印頁面