image-set()仅依据设备像素比（dpr）静态选择图片，不响应屏幕尺寸、网络条件或用户偏好；必须含1x项且url有效，firefox不支持；替代方案为媒体查询、js动态设置或img的srcset+sizes。
不能异步加载，image-set() 不触发预加载，浏览器只在渲染时根据设备像素比（DPR）动态选择一个源，其余图片不会下载——但它本身不是异步机制，也没有加载时机控制能力。
它只响应 DPR，不响应屏幕尺寸或网络条件
image-set() 的判断依据唯一且固定：当前设备的 device pixel ratio（如 1x、2x、3x）。它完全忽略视口宽度、设备类型、横竖屏、网络状况甚至用户偏好。例如：
- iPad Pro（DPR=2）永远匹配 2x，哪怕你希望它用桌面级大图
- 一台 1080p Windows 笔记本（DPR=1）即使屏幕宽 1920px，也只会加载 1x 图
- 手机开启“省流量模式”？image-set() 不感知，照样按 DPR 选图
语法和兼容性有硬限制
要让 image-set() 实际生效，必须满足几个关键前提：
- 必须显式写出 1x 项，否则旧版 Safari 可能整条声明失效
- 路径必须是有效 URL（相对或绝对），不能用 Webpack/Vite 别名（如
@/assets或~images） - Firefox 至今（v128）完全不支持 background-image 中的 image-set()
- 无法嵌套 @media、不能配合 sizes、也不支持 w 描述符（如
800w）
真正可控的替代方案
如果你需要按屏幕宽度、设备类型或 DPR 组合决策，应放弃 image-set()，改用更明确的方式：
- 媒体查询 + 多层 background-image：为不同断点分别写规则，后写的覆盖前写的（注意所有图片仍可能被预加载）
- @media (min-resolution: 192dpi) 单独适配高 DPI 屏幕，兼容 IE11 起的全系浏览器
-
JS 动态设置：读取
window.devicePixelRatio和matchMedia，再通过element.style.backgroundImage注入最适图片 - 对
<img>标签，优先用srcset + sizes，它支持 w 单位、媒体条件和浏览器智能选图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
