根本原因是浏览器对min-resolution的解析逻辑与设备实际dpr不完全对齐；正确写法应为@media(-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx)，用逗号分隔确保兼容性。
直接用 @media 切换背景图能适配不同 DPR，但必须分开写设备像素比条件，不能和宽度混用；否则高清图可能错配到非 Retina 设备上。
为什么 @media (min-resolution: 2dppx) 有时不生效
常见现象是 iPhone 13（DPR=3）加载了 2x 图、或 Windows 高缩放笔记本误触发高清样式——根本原因是浏览器对 min-resolution 的解析逻辑和设备实际 DPR 不完全对齐。
- 旧版 iOS Safari（dppx，只认
-webkit-min-device-pixel-ratio -
min-resolution: 192dpi和2dppx数值等价，但语义不同：dpi 是物理密度单位，dppx 是设备抽象比，混写会扩大匹配范围 - Chrome 在高系统缩放（如 150%）下可能报告
min-resolution: 2.25dppx，导致漏掉2dppx规则
正确写法：用逗号分隔多条件，而非 and
必须把 WebKit 旧语法和标准 dppx 分开写成并列条件，让任一命中即生效，同时避免跨平台兼容断层：
/* 基础图（所有设备兜底） */
.hero {
background-image: url('./img/bg-1x.jpg');
background-size: cover;
}
<p>/<em> 高清图：WebKit 旧版 + 标准 dppx 双覆盖 </em>/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.hero {
background-image: url('./img/bg-2x.jpg');
}
}</p><p>@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
.hero {
background-image: url('./img/bg-3x.jpg');
}
}</p>
注意：background-size 要在每个媒体查询里显式重设，不能依赖继承——否则 3x 图可能被拉伸变形。
路径和缓存问题比 DPR 更容易踩坑
写了正确的媒体查询，但图还是模糊？大概率卡在路径或缓存上：
-
url()路径必须相对 CSS 文件位置，不是 HTML 页面；比如 CSS 在/css/main.css，图就得写url(../img/bg-2x.jpg)，不能写url(/img/bg-2x.jpg) - 开发阶段务必加版本参数：
url('./img/bg-2x.jpg?v=20260525')，否则改图后浏览器仍用缓存的旧文件 - 检查 Network 面板：如果
bg-2x.jpg返回304，说明缓存生效，不是 DPR 检测失败
别指望浏览器自动省流量
即使你只在 @media (min-resolution: 2dppx) 里写了 background-image，Chrome 和 Safari 仍可能在 DPR=1 的手机上提前下载所有尺寸的图——这是预加载机制决定的，不是 bug。
真正可控的方式只有两种：一是用 <img> + srcset（仅适用于内容图），二是把高清图规则拆到独立 CSS 文件中，再用 media 属性异步加载（如 <link rel="stylesheet" href="hd.css" media="(min-resolution: 2dppx)">）。前者简单，后者精准，但都绕不开一个事实：CSS 的 background-image 天然不适合做“按需加载”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
