<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 的点数。由于 CSS in 与 CSS px 的固定比例为 1:96,因此 1dppx 相当于 96dpi,这与 image-resolution 所定义的 CSS 中显示图像的默认分辨率一致。

x

dppx 的别名。

备注: 虽然数字 0 在任何单位下都是相同的,但单位不能省略。换句话说,0 无效,不能代表 0dpi0dpcm0dppx

示例

在媒体查询中使用

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<resolution>
dpcm unit
dpi unit
dppx unit
x unit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

参见