CSS 数据类型 <resolution> 在媒体查询中使用时，表示输出设备的像素密度，例如其分辨率。
屏幕的单位不是使用物理测量，而是 CSS 英寸，厘米或像素。
单位
dpi - 表示一英寸中的点数。打印文档的每英寸点数 (dpi) 通常明显高于屏幕（通常为 72 或 96 dpi）。一英寸相当于 2.54 厘米，因此 1 dpi 大致相当于每厘米 0.39 点 (dpcm)。
dpcm - 表示每厘米的点数。由于一英寸相当于 2.54 厘米，因此每厘米 1 个点 (dpcm) 大致相当于每英寸 2.54 个点 (dpi)。
dppx - 表示每英寸的点数单位为 px。由于 CSS in 和 CSS px 之间的固定比例为 1:96，每像素 1 点 (dppx) 等于每英寸 96 点 (dpi)，该比例对应于图像分辨率指定的 CSS 中显示的图像的默认分辨率。
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">当屏幕分辨率至少为 80dpi 时，此框将具有红色背景。</div>
<div class="box2">对于最高分辨率为 300dpi 的设备，此框将具有黄色背景。</div>
<div class="box3">当屏幕分辨率恰好为 96dpi 时，此框将具有粉红色背景。</div>
</body>
</html>