image-set 仅适用于 background-image 且兼容性差，安卓 WebView 和 Safari 缩放时易失效；@media 配合 DPR 媒体查询更可靠；srcset + x 是 img 标签加载 2x 图的最优解。
image-set 和 @media 都能加载 2x 图，但适用场景和兼容性差异极大——image-set 仅适用于 CSS background-image，且 Safari 16.4+ 才稳定支持；而 @media（配合 min-resolution 或 -webkit-min-device-pixel-ratio）兼容性好、可控性强，但需手动维护多套规则。
为什么 image-set 在移动端常失效
它不是“自动适配 DPR”，而是由浏览器根据当前设备 DPR 和缩放状态，从提供的资源中选一个最接近的。但问题在于：
- 安卓 WebView（尤其 Android 10 以下）完全不识别
image-set，直接回退到第一个 fallback（通常是 1x） - Safari 对
image-set的解析在页面 zoom ≠ 100% 时会出错，比如用户双指放大后，DPR 判定失准 - 它无法与
sizes协同——background-image本就不响应sizes，所以你没法告诉浏览器“这张背景图在小屏下只占 50vw”，也就没法触发高 DPR 下的资源选择逻辑 - 构建工具（如 Vite）默认不处理
image-set中的路径，url(logo@2x.png)若未实际存在，编译不报错，运行时 404
@media 加载 2x 图的可靠写法
用媒体查询显式匹配 DPR，是最稳妥、可调试、可降级的方式。关键不是写对语法，而是覆盖真实设备行为：
- 必须同时写标准语法和 WebKit 前缀：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)—— 因为 Android Chrome 旧版只认前者，Firefox 只认后者 -
192dpi对应 DPR=2（96dpi 是基准），288dpi对应 DPR=3；不要写2dppx，部分安卓机型解析失败 - 避免嵌套过深：媒体查询写在顶层 class 上，别塞进
:hover或@layer里，否则 iOS Safari 可能跳过匹配 - 兜底图必须存在且尺寸合理：即使 DPR=1，也要确保
background-image: url(logo.png)能正常显示，否则高 DPR 设备切回 1x 时空白
示例：
icon-btn {
background-image: url("icon.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
icon-btn {
background-image: url("icon@2x.png");
}
}
srcset 比 image-set 更值得优先考虑
如果你控制的是 image-set 或媒体查询——srcset + x 描述符是原生、高效、可预测的方案：
-
srcset="logo.png 1x, logo@2x.png 2x"让浏览器直接读取window.devicePixelRatio做匹配，不依赖 CSS 解析时机 - 它天然支持
sizes，能结合响应式布局做精准资源调度，image-set完全做不到这点 - 所有现代移动端浏览器（包括微信内置浏览器、QQ 浏览器 X5 内核）都支持
srcset+x，兼容性远超image-set - 唯一要注意的是：Webpack/Vite 不会自动复制
@2x文件，得靠copy-webpack-plugin或vite-plugin-static-copy显式声明
容易被忽略的渲染前提：图片容器不能隐式缩放
就算你用了 srcset 或 @media 加载了 @2x 图，如果父容器有 transform: scale(0.9)、flex: 1 导致宽度计算偏差，或 max-width: 100% 配合 font-size: 0 引发行内换行，图片实际渲染像素就≠原始物理像素——这时 image-rendering 失效，srcset 选的高倍图也白搭。
真要排查，打开 Safari 开发者工具 → Elements → 选中 rendered width/height，和图片原始尺寸对比。差值超过 1px，就得回头检查布局链上哪一层偷偷缩放了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
