最稳方案是用 min-resolution: 2dppx 媒体查询配合显式 background-size；因 2dppx 表示逻辑像素≥2×2物理像素，语义准确且兼容主流浏览器，而 192dpi 受系统缩放影响易漏判；换 @2x 图后必须同步设置 background-size 为对应逻辑尺寸，否则仍模糊。
直接用 min-resolution: 2dppx 媒体查询 + 显式 background-size，是目前最稳、兼容性最好、无需 JS 的方案。别用 192dpi，它在 Windows 高缩放或 Chrome 笔记本上常不触发。
为什么必须用 min-resolution: 2dppx 而不是 192dpi
192dpi 依赖系统物理英寸和缩放设置，在 Windows 缩放 125% 或 Chrome 笔记本上容易漏判；2dppx 是纯逻辑比值（1 CSS 像素对应 ≥2×2 物理像素），语义准确，兼容 Chrome 29+、Firefox 16+、Safari 8+、Edge 12+。混写 @media (min-resolution: 2dppx), (min-resolution: 192dpi) 是“或”逻辑，192dpi 可能在非 Retina 设备上意外命中，导致高清样式错配。
background-image 换了 @2x 图却还是模糊？
根本原因：只换图，没调尺寸。浏览器默认把 icon@2x.png（200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示。
- 原图
icon.png是 100×100px → 逻辑尺寸就是100px 100px - @2x 图
icon@2x.png是 200×200px →background-size必须写成100px 100px - 如果容器本身宽高是
50px，那background-size就得是50px 50px，不是按图文件尺寸硬套
srcset 和 sizes 处理 <img> 更可靠
srcset 是原生、无 JS、SEO 友好、预加载友好的首选方案，但必须满足几个硬条件：
立即学习“前端免费学习笔记（深入）”；
-
srcset必须用x描述符（"icon-24.png" 1x, "icon-48.png" 2x），不能混用w（"icon-24.png" 24w对 DPR 切换无效） -
sizes不可省略：浏览器靠它算出“这张图该以多少 CSS 像素渲染”，再结合devicePixelRatio选图。例如：sizes="(max-width: 768px) 100vw, 800px" -
src是降级兜底项，IE 全系不支持srcset时才用它，所以必须保证src指向一张可用的 1x 图 - 2x 图物理尺寸必须严格是 1x 图的 2 倍（24px → 48px），不能靠 CSS 缩放“假装”高清
-
<img>标签必须设width/height，否则布局偏移会导致模糊
image-set() 现在还不能当主力用
它理论上优雅，但现实里坑多：
- 只对
background-image生效，对<img>标签完全无效 - Firefox 至今（v128）完全不支持，安卓 WebView 多数只认
-webkit-image-set() - 构建工具（如 Vite）默认不解析
image-set()中的路径，“logo@2x.png”这种含@的文件名必须加引号且三行引号类型一致 - 分辨率描述符必须带单位：
1x✅，2❌，2xpx❌
真正要落地，background-image 的适配必须同时控制好媒体查询逻辑、图片尺寸、background-size 值三者的一致性——少一个环节，模糊就藏不住。
