分辨率

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

语法

resolution 特性指定为 <resolution> 值，表示输出设备的像素密度。它是一个范围特性，这意味着您还可以使用前缀 **min-resolution** 和 **max-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
# 分辨率

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅