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>

打印页面