真正能落地的方案是媒体查询 + background-image 多层覆盖，关键图建议改用 html 层的 + srcset；因 firefox 完全不支持 image-set()，safari 旧版语法敏感且不响应屏幕宽度。
直接结论：别只依赖 image-set()，它在 Firefox 中完全不生效，Safari 旧版本对语法极其敏感，且无法响应屏幕宽度——真正能落地的方案是媒体查询 + background-image 多层覆盖，关键图建议改用 HTML 层的 <picture></picture> + srcset。
为什么 image-set() 在多数项目里会失效
不是你写错了，而是浏览器根本没解析它：
- Firefox 128（当前最新版）仍完全跳过
image-set()，整条background-image声明静默丢弃 - Safari ≤15.3 遇到缺失
1x项（哪怕只少一个空格），就直接忽略整条规则 - Chrome/Safari 要求路径必须是
url("a.png") 1x这种完整格式：括号、引号、单位缺一不可；写成"a.png" 1x或url(a.png) 1x都会失效 - 构建工具（Vite/Webpack）不会重写
image-set()里的路径，logo@2x.png若没打进dist目录，高 DPR 设备直接 404
真正兼容所有浏览器的写法：三行 fallback 顺序不能乱
浏览器从上到下逐条解析，跳过不支持的，执行能识别的。必须严格按这个顺序写：
background-image: url("logo@1x.png");
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
说明：
- 第一行是通用 fallback，所有浏览器都认，绝不能省
- 第二行专供老 Safari（iOS 14.5 及更早），
-webkit-必须写在第三行之前，否则 Safari ≥16.4 可能漏掉1x - 第三行给现代 Chrome/Safari，但 Firefox 完全跳过——所以前两行不是可选，是刚需
- 所有路径、引号类型（全单或全双）、空格、单位（必须是
1x，不能是1或1dppx）必须完全一致，否则某些浏览器校验失败直接丢弃整条
当需要同时响应宽度和 DPR 时，image-set() 就不够用了
比如 iPad Pro 横屏（DPR=2，宽 1024px）和 iPhone 竖屏（DPR=3，宽 375px）都可能加载同一张 @2x 图，结果前者拉伸、后者压缩——因为 image-set() 只看 DPR，不看视口宽度。
此时必须分层控制：
- 先用
@media (max-width: 767px)切小屏图（如hero-mob@2x.jpg） - 再嵌套 DPR 查询：
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2)或@media (max-width: 767px) and (min-resolution: 192dpi) - 桌面端同理：
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) - 注意：不要把
image-set()塞进@media里——它不支持嵌套，写了也无效
更推荐的方案：改用 <picture></picture> + srcset 处理关键图
语义化图片（如 banner、头图、内容图）不该用 background-image，而该用 HTML 层的响应式能力：
-
srcset提供带w描述符的候选图（如photo-400w.jpg 400w），配合sizes告诉浏览器“这张图在不同断点下占多宽”，浏览器自动算出该加载哪张 - 支持预加载（
<img>在 HTML 解析阶段就能发起请求），background-image是运行时才计算，首屏性能差 -
<picture></picture>可叠加 WebP/AVIF 回退，image-set()不支持格式降级 - 避免模糊的核心是物理尺寸匹配：CSS 设定
width: 100px; height: 50px;，那@2x图就得是200×100px，否则background-size: cover会强行缩放
最易被忽略的一点：所有方案都依赖你实际提供了对应分辨率的图片文件，且构建后路径正确——写对了 CSS，但 logo@2x.png 没打进打包目录，一切白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
