resolution

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 2022 年 9 月起,所有浏览器都已支持此功能。

resolution CSS 媒体特性可用于测试输出设备的像素密度。

语法

resolution 特性被指定为表示输出设备像素密度的 <resolution> 值。它是一个范围特性,这意味着你也可以使用带有前缀的 min-resolutionmax-resolution 变体来分别查询最小值和最大值。

示例

HTML

html
<p>This is a test of your device's pixel density.</p>

CSS

css
/* Exact resolution with unit `dpi` */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* Minimum resolution synonym units: `dppx` and `x` */
@media (min-resolution: 2dppx) {
  p {
    text-decoration: underline;
  }
}

@media (min-resolution: 2x) {
  p {
    text-decoration: underline;
  }
}

/* Maximum resolution with unit `dpcm` */
@media (max-resolution: 2dpcm) {
  p {
    background: yellow;
  }
}

结果

规范

规范
媒体查询第 4 级
# resolution

浏览器兼容性

另见