@media (min-resolution: 2dppx) 不生效是因为旧版 iOS Safari（9–12）不识别该语法，仅支持 -webkit-min-device-pixel-ratio: 2；正确写法是用逗号分隔两个条件实现兼容。
为什么只写 @media (min-resolution: 2dppx) 还是不生效
因为旧版 iOS Safari（iOS 9–12）根本不认识 min-resolution，直接跳过整条规则。它只认 -webkit-min-device-pixel-ratio，而且必须写成 2，不能写 2.0 或 2dppx。现代浏览器虽支持 2dppx，但单独用它等于放弃大量存量 iOS 设备。
正确写法是用逗号分隔两个独立条件，让浏览器“任选其一命中即可”：
div.icon {
background-image: url("icon.png");
background-size: 16px 16px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
div.icon {
background-image: url("icon@2x.png");
background-size: 16px 16px; /* 必须重写 */
}
}-
-webkit-min-device-pixel-ratio: 2覆盖老 iOS 和部分 Android WebView -
min-resolution: 2dppx覆盖 Chrome、Firefox、Safari 14+、Edge - 绝对不要写成
and连接，否则逻辑变成“同时满足”，结果谁都不触发 - 所有高清图文件（如
icon@2x.png）必须真实存在且尺寸是 1x 图的 2 倍（32×32 对应 16×16）
background-size 不重写就会糊，不是 bug 是机制
CSS 不会自动按 DPR 缩放背景图。当你把 icon@2x.png（32×32 px）设为背景，而容器宽高是 16px，浏览器默认把它当 32 CSS 像素渲染——结果拉伸到填满 16px 容器，像素被插值模糊。
必须显式指定 background-size 为逻辑尺寸（即设计稿里的 CSS 像素值），才能让高倍图“精准覆盖”：
立即学习“前端免费学习笔记（深入）”；
- 容器是
width: 20px; height: 20px;→background-size: 20px 20px; - 如果是全屏 banner，且希望等比缩放不裁剪 → 用
background-size: contain; - 如果允许裁剪、优先填满 → 用
background-size: cover;，但需确认构图安全区 - 千万别依赖继承：媒体查询块里必须完整写出
background-size，否则 fallback 到初始值
为什么 image-set() 在 Firefox 里背景直接消失
Firefox 至今（v128）完全不解析 image-set()，遇到就静默丢弃整条 background-image 声明——不是降级，是彻底忽略。所以单靠它等于没写。
真要兼容，得用三行叠加 + 明确 fallback 顺序：
div.logo {
background-image: url("logo.png"); /* 所有浏览器兜底 */
background-image: -webkit-image-set(url("logo.png") 1x, url("logo@2x.png") 2x); /* 老 Safari */
background-image: image-set(url("logo.png") 1x, url("logo@2x.png") 2x); /* 现代 Chrome/Safari */
background-size: 100px 40px;
}- 顺序不能错：
url()必须在最前，否则旧浏览器连 fallback 都看不到 -
1x单位必须带x，不能写成1或1dppx - 路径必须用
url("...")包裹，引号统一（全单或全双） - Webpack/Vite 不处理
image-set()里的路径，构建后若logo@2x.png不在dist/下，高 DPR 屏就 404
带宽浪费比模糊更隐蔽：媒体查询不阻止预加载
@media 只控制样式是否生效，不控制资源是否下载。只要 background-image: url("icon@2x.png") 出现在某条匹配规则里，Chrome、Safari 就会在解析 CSS 阶段并发下载它——哪怕设备是 DPR=1，哪怕用户根本没滚动到该区域。
这意味着：
- 低 DPR 设备也会下载
@2x图，白耗流量 - 构建工具（如 Vite）若未做静态分析，
icon@2x.png会被无条件打进包，体积膨胀 - 真正省带宽的方案只能是 HTML 层的
srcset+sizes，因为浏览器原生支持按视口宽度和 DPR 决策加载哪张 - 如果非要用背景图，就只对关键元素（如 logo、按钮图标）上高倍图，别全站铺开
最常被忽略的一点：媒体查询是开关，不是调度器。它决定“怎么渲染”，但从不参与“要不要加载”。想让浏览器自己选图、按需加载，这件事必须发生在 HTML 解析阶段，而不是 CSS 计算时。
