resolution

Baseline 已广泛支持

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

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 级 # resolution

浏览器兼容性

另见

window.devicePixelRatio
image-resolution 属性

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025年7月14日，由 MDN 贡献者完成。

在 GitHub 上查看此页面 • 报告此内容存在的问题