image-set()在真实项目中基本不可用：Firefox v128静默跳过整行，Safari≤15.3漏1x即整条丢弃，Chrome/Safari对引号、单位（须为2x非2）、路径敏感，Vite/Webpack不处理其资源引用，易致404。
image-set() 在真实项目中基本不可用——Firefox v128 完全不解析，Safari 和 Chrome 支持脆弱：漏写 1x、路径无引号、单位写成 2 而非 2x，均导致整条声明被忽略；它只依据 DPR 选图，无法兼顾小屏高清与大屏高清；构建工具（Vite/Webpack）也完全不扫描 image-set() 里的 url()，logo@2x.png 不进 dist 就是 404。别硬扛，直接换方案。
为什么 image-set() 写了却没效果
不是你语法错，而是浏览器压根没执行它：
- Firefox v128 静默跳过整行
background-image: image-set()，不报错、不降级、不加载任何图——结果就是背景空白 - Safari ≤15.3 遇到漏写
1x项，直接丢弃整个函数，连 fallback 都不走 - Chrome/Safari 若路径没加引号（如
url(logo@2x.png)），或单位写成2而非2x，也会整条忽略 - 构建工具（Vite/Webpack）不识别
image-set()中的资源路径，logo@2x.png不会自动拷贝进dist，上线即 404
必须同时命中两个 @media 才能覆盖主流设备
单写一种媒体查询会漏匹配：
- 只写
@media (min-resolution: 2dppx)：漏掉 iOS 9–12 的 Safari（它们只认-webkit-min-device-pixel-ratio） - 只写
@media (-webkit-min-device-pixel-ratio: 2)：在新版 Chrome/Firefox/Edge 中可能失效（已转向标准min-resolution） - 正确写法是两者并存，用逗号分隔：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) -
192dpi≈2dppx，288dpi≈3dppx，比写2dppx兼容性更稳
background-size 必须显式设置，且不能只靠 contain 或 cover
模糊的根本原因不是缩放方式错，而是图源分辨率没匹配 DPR：
立即学习“前端免费学习笔记（深入）”；
- 一张
100px × 100px的 1x 图，在 iPhone 14 Pro（DPR=3）上会被拉伸渲染为 300 物理像素宽高，插值算法必然糊 -
background-size: contain只控制缩放逻辑，不解决图源清晰度问题 - 若元素尺寸固定（如
width: 24px; height: 24px;），对应 @2x 图应为48px × 48px，并配background-size: 24px 24px才精准 - 对响应式宽高元素（如全宽 banner），可用
background-size: 100% / auto+ 高倍图，但前提是图源本身够大
真正容易被忽略的是：DPR 和视口宽度是正交维度——image-set() 只看 DPR，不管屏幕是 375px 还是 1920px；而用户实际需要的是“小屏高清”+“大屏高清”双重适配。媒体查询能组合 min-width 和 min-resolution，这才是可控的起点。
