<resolution>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年9月.
<resolution> CSS 数据类型用于描述媒体查询中的 resolution，表示输出设备的像素密度，即分辨率。
在屏幕上，单位与 CSS 英寸、厘米或像素有关，而与物理值无关。
语法
<resolution> 数据类型由一个严格意义上的正数 <number> 和下面列出的一个单位组成。与所有 CSS 尺寸一样，单位字面量和数字之间没有空格。
单位
dpi-
表示每英寸点数。屏幕通常每英寸包含 72 或 96 个点，但打印文档的 dpi 通常要大得多。1 英寸是 2.54 厘米，
1dpi≈0.39dpcm。 dpcm-
表示每厘米上点数。1 英寸是 2.54 厘米，
1dpcm ≈ 2.54dpi。 dppx-
表示每个
px的点数。由于 CSSin与 CSSpx的固定比例为 1:96，因此1dppx相当于96dpi，这与image-resolution所定义的 CSS 中显示图像的默认分辨率一致。 x-
dppx的别名。
备注：
虽然数字 0 在任何单位下都是相同的，但单位不能省略。换句话说，0 无效，不能代表 0dpi、0dpcm 或 0dppx。
示例
在媒体查询中使用
css
@media print and (min-resolution: 300dpi) {
/* … */
}
@media (resolution: 120dpcm) {
/* … */
}
@media (min-resolution: 2dppx) {
/* … */
}
@media (resolution: 1x) {
/* … */
}
有效的 resolution 值
96dpi 50.82dpcm 3dppx
无效的 resolution 值
72 dpi 不允许在数字和单位之间使用空格。 ten dpi 只能使用十进制数字。 0 单位是必需的。
规范
| Specification |
|---|
| CSS Values and Units Module Level 4 # resolution |
浏览器兼容性
Loading…
参见
- resolution 媒体特性
image-resolution属性- 使用 @media 查询