image-set() 不是万能方案，因仅响应设备像素比且 firefox 完全不支持，需三行叠加声明加媒体查询兜底，并严格遵循语法、路径和单位规范才能兼容落地。
image-set() 不是万能方案，它只响应设备像素比（DPR），且 Firefox 至今（v128）完全不支持——直接写就等于背景图消失。真正在生产环境可用的方案，得靠组合策略和明确 fallback。
为什么 image-set() 写了却没效果
最常见原因不是语法错，而是浏览器根本没解析它：image-set() 在 Firefox 中被静默丢弃（不是降级，是整条声明跳过），旧版 Safari（≤15.3）遇到缺失 1x 项也会直接忽略整条；Chrome 和 Safari 虽支持，但只认 url("a.png") 1x 这种带括号+引号+单位的写法，漏掉任一环节都失效。
-
1x必须存在，且必须写成1x（不能是1或1dppx） - 路径必须用
url()包裹，且引号类型要统一（全用单引号或全用双引号） - 构建工具（Vite/Webpack）不会处理
image-set()里的路径，"bg@2x.png"若没打进dist目录，高 DPR 屏就 404 - 不能和
background-image: url(...)写在同一行用逗号拼接，否则整条被当无效值丢弃
兼容所有浏览器的写法：三行叠加 + 媒体查询兜底
真正落地时，必须按顺序写三行独立的 background-image 声明，让浏览器从上到下“试错”：
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 完全跳过——所以第一行不能省
- 所有路径、引号、空格、单位必须完全一致，否则某些浏览器会因校验失败而丢弃整条
什么时候该放弃 image-set()，改用媒体查询
当你需要同时响应屏幕宽度和 DPR（比如 iPad Pro 横屏加载大图+高清图，手机竖屏加载小图+高清图），image-set() 就无能为力——它只看 DPR，不看 min-width。
- 用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)组合写法，覆盖 iOS/Android/Windows 高缩放场景 - 避免混用
and：写成@media (min-width: 768px) and (min-resolution: 2dppx)会导致部分 Chrome 在高系统缩放下漏匹配 - 每个断点里单独设
background-size，否则@2x图在小容器里会被拉伸模糊 - 如果用了 Webpack/Vite 别名（如
@/assets/bg.png），媒体查询里也得换成真实相对路径，否则构建后 404
image-set() 的隐藏代价：不预加载、不响应 DPR 变化
它不是异步加载机制，只是渲染时静态选一个源——浏览器不会提前 fetch 其他候选图，首次渲染可能有短暂模糊；而且插拔外接屏导致 DPR 变化时，已渲染的元素不会自动换图，必须强制重排或刷新。
- Network 面板里只看到当前 DPR 匹配的那一张图被请求，其余“看不见”，但这不等于它们被优化掉了——只是没触发
- 没有
loading="lazy"或优先级控制，background-image本就是低优先级资源，image-set()不改变这点 - 无法配合
sizes或w描述符，也不能用于<img>标签——想做语义化高清图，必须用srcset+sizes
background-size 是否同步缩放、以及确保构建后所有 @2x 资源真被复制进了输出目录。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
