<resolution>
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
<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 |
浏览器兼容性
BCD tables only load in the browser
参见
- resolution 媒体特性
image-resolution
属性- 使用 @media 查询