最可靠方案是用min-resolution: 2dppx判断Retina屏并显式设置background-size，因dppx语义准确、兼容性好且不受系统缩放干扰，而192dpi易误触发，换@2x图后若不设background-size匹配逻辑像素尺寸就会模糊。
直接用 min-resolution: 2dppx 媒体查询 + 显式 background-size，是目前最稳、兼容性最好、无需 JS 的方案。其他写法要么触发不准，要么漏掉关键尺寸控制，结果图换了还是糊。
为什么必须用 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，否则布局偏移会导致模糊
最容易被忽略的一点：所有适配方案都绕不开「逻辑尺寸」这个锚点。无论你用媒体查询、srcset 还是 image-set()，只要没把背景图或图片的渲染尺寸对齐设计稿原始 CSS 像素值，高清资源就只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
