CSS 数据类型 <resolution> 在媒体查询中使用时，表示输出设备的像素密度，例如其分辨率。
屏幕的单位不是使用物理测量，而是 CSS 英寸、厘米或像素。
单位
- dpi - 表示一英寸中的点数。打印文档的每英寸点数 （dpi） 通常比屏幕高得多，屏幕通常有 72 或 96 dpi。1 英寸相当于 2.54 厘米，因此 1 dpi 大致相当于每厘米 0.39 点 （dpcm）。
- dpcm - 表示每厘米的点数。由于 1 英寸相当于 2.54 厘米，因此每厘米 1 点 （dpcm） 大致相当于 2.54 每英寸 （dpi）。
- dppx - 表示每单位像素的点数。由于 CSS in 和 CSS px 之间的固定比例为 1：96，因此每像素 1 点 （dppx） 等于 96 像素 （dpi），这对应于 image-resolution 指定的 CSS 中显示的图像的默认分辨率。
- x - dppx 的别名。
语法
列出的单位之一后跟一个正值 <number> ，在 <resolution> 数据类型中。单位符号和数字之间不应有空格，就像在所有其他 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>
