@media的resolution dppx值是否与window.devicePixelDensity取值一致？

结论 #

CSS @media 规则中的resolution特性对应的是浏览器视口实际使用的设备像素密度（即系统缩放后的DPR），而非显示器的原生像素密度。

对应你给出的4K显示器场景：

• 系统缩放100%时，resolution查询到的dppx值为1.0
• 系统缩放175%时，resolution查询到的dppx值为1.75
  和JavaScript的window.devicePixelRatio（你问题中提到的window.devicePixelDensity为API名称笔误，标准接口为前者）返回值完全一致。

适配背景图的使用参考 #

你在Avada子主题的style.css中做背景图自适应时，可以直接用resolution查询匹配不同像素密度的素材，保证图片显示清晰度，示例写法如下：

/* 适配1x密度场景 */
.custom-element {
  background-image: url("/wp-content/uploads/xxx/bg-standard.jpg");
  background-size: cover;
}

/* 适配≥1.5x密度场景，包括开启系统缩放的普通屏、原生高分屏 */
@media (min-resolution: 1.5dppx) {
  .custom-element {
    background-image: url("/wp-content/uploads/xxx/bg-highres.jpg");
  }
}

内容的提问来源于stack exchange，提问作者Bill Vallance