image-set() 在真实项目中基本不能单独使用——firefox 完全不支持，chrome 和 safari 要求语法零容错，且仅按设备像素比（dpr）选图，不响应屏幕宽度。
image-set() 在真实项目中基本不能单独用——Firefox 完全不支持，Chrome 和 Safari 要求语法零容错，且它只按设备像素比（DPR）选图，不响应屏幕宽度。想让图标在高DPI屏下清晰，得先明确：这是「同一构图、仅需缩放」的场景，不是艺术指导，也不是流体布局图。
为什么 background-image: image-set() 经常失效
常见现象是 DevTools 里该样式被划掉，或图标直接不显示。根本原因是浏览器解析失败后静默丢弃整条声明，而非降级到下一个值。
-
Firefox（截至 v128）完全不识别image-set()，连 fallback 都不触发 - 路径没用
url()包裹，比如写成image-set("icon.png" 1x)❌，必须是image-set(url("icon.png") 1x)✅ - 漏写
1x描述符：旧版 Safari 会整条忽略，哪怕写了2x和3x - 单位写错：用
2xpx或2（无单位）会被忽略，只能是1x、2x、2dppx、192dpi - 引号不统一：一个用双引号、一个用单引号，部分 Safari 版本报
Failed to parse
正确写法必须带三层 fallback
顺序和格式比内容更重要。浏览器从上到下解析，跳过不认识的声明，最终生效的是它能识别的最后一项。
background-image: url("icon@1x.png");
background-image: -webkit-image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x, url("icon@3x.png") 3x);
background-image: image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x, url("icon@3x.png") 3x);
关键点：
-
-webkit-image-set()必须写在image-set()前面，否则 Safari ≥16.4 可能跳过 - 所有路径、引号类型、空格、单位必须完全一致，复制粘贴最安全
-
url()内路径必须是相对或绝对 URL，Webpack/Vite 的@/assets别名在 CSS 中无效 - 不要试图用逗号分隔多个值：
background-image: url(...), image-set(...)是非法语法
什么时候该放弃 image-set() 改用媒体查询
当你发现图标在 iPad Air（DPR=2，宽 820px）和 Windows 笔记本（DPR=1，宽 1920px）都加载同一张 @2x 图时，说明 image-set() 已经超出能力边界——它无法区分“高 DPR 小屏”和“低 DPR 大屏”。
- 需要按视口宽度 + DPR 双条件切换？用
@media (min-width: 768px) and (min-resolution: 192dpi) - 要兼容 IE11？只能用
@media (-webkit-min-device-pixel-ratio: 2)+url() - 图标尺寸随容器变化（如 flex 子项）？
image-set()不管 background-size 怎么设，只管 DPR，容易拉伸模糊 - 构建工具不支持实验性 CSS 特性？Autoprefixer 默认不处理
image-set()，需手动开启
真正容易被忽略的是：你写的 1x 图是否真对应 1 倍物理像素？如果设计稿定的是 24×24px，那 @2x 就必须是 48×48px，否则 background-size: contain 一缩放就糊。别光盯着 CSS 写对没，源图尺寸才是第一道关卡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
