最可靠方案是用min-resolution: 2dppx判断retina屏并显式设置background-size，因dppx语义准确、兼容性好且不受系统缩放干扰，而192dpi易误触发，换@2x图后若不设background-size匹配逻辑像素尺寸就会模糊。
直接用 min-resolution: 2dppx 判断 Retina 屏，配合显式 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，不是按图文件尺寸硬套 - 基础规则写 1x 图：
background-image: url("icon.png"); background-size: 100px 100px; - 高清规则用媒体查询包裹：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url("icon@2x.png"); }
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"若未真实输出到dist/目录，404 后 fallback 到 1x 图，看起来还是糊 - 只按 DPR 选图，不看视口宽度 —— iPhone 竖屏（DPR=3）和 MacBook（DPR=2）可能都加载同一张 @2x.png，但物理尺寸需求不同，必然拉伸模糊
- 必须显式声明
background-size，且值要按设计稿逻辑尺寸设（如图标本应显示为 24px，就写background-size: 24px 24px）
真正容易被忽略的是：即使你写了正确的媒体查询或 srcset，只要漏掉 background-size 或没给 <img> 设宽高，模糊就会照常发生——这不是浏览器 bug，是 CSS 渲染规则本身的要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
