最稳方案是 min-resolution: 2dppx 加显式 background-size；因 dpr 才是高分屏真实依据，2dppx 语义准确且不受系统缩放干扰，而 192dpi 易误触发；仅换 @2x 图不设 background-size 会导致拉伸模糊，必须按逻辑像素尺寸设置；img 用 srcset + sizes 更优，但需 x 描述符、sizes 属性、width/height 和 src 降级。
直接换图不设尺寸，再高清的资源也糊；用 min-resolution: 2dppx + 显式 background-size 是目前最稳、兼容性最好、无需 JS 的方案。
为什么 min-resolution: 2dppx 比 192dpi 更可靠
设备像素比（DPR）才是判断高分屏的真实依据，2dppx 表示「1 个 CSS 像素由 ≥2×2 物理像素渲染」，语义准确且不受系统缩放干扰。而 192dpi 依赖物理英寸和操作系统缩放设置，在 Windows 高缩放（如 125%）或部分 Chrome 笔记本上常不触发。
-
min-resolution: 2dppx兼容 Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ - 混写
@media (min-resolution: 2dppx), (min-resolution: 192dpi)是“或”逻辑，192dpi可能在非 Retina 设备上误命中，导致高清样式错配 - 别写
min-resolution: 2dppx, 192dpi—— 这是语法错误，浏览器会当成两个并列条件，不是单位换算
background-image 换了 @2x 图还是模糊？缺这一步
只替换 url('icon@2x.png') 不够，浏览器默认按图像原始尺寸（比如 48×48px）渲染，结果在 24×24px 容器里被拉伸放大，反而更糊。
- 必须显式设置
background-size回设计稿的逻辑像素尺寸：原图icon.png是 24×24px →background-size: 24px 24px - 如果容器本身宽高是
32px，那background-size就得是32px 32px，不是按图文件尺寸硬套 - 别用
cover或100% 100%代替，它们会让高清图二次插值失真
用 srcset 加 sizes 处理 <img> 更省心
srcset 是原生、无 JS、SEO 友好、预加载友好的首选方案，但必须满足几个硬条件才能生效：
- 必须用
x描述符：srcset="icon-24.png 1x, icon-48.png 2x"；混用w（如48w）会导致浏览器忽略x，只按视口宽度选图 -
sizes不可省略，它告诉浏览器“这张图该以多少 CSS 像素渲染”，例如：sizes="(max-width: 768px) 24px, 32px" -
src是降级兜底项，IE 全系不支持srcset时才用它，所以必须保证src指向一张可用的 1x 图 -
<img>必须设width和height，否则布局偏移会导致模糊
最容易被忽略的一点：所有适配都锚定在「逻辑尺寸」上
无论你用媒体查询、srcset 还是 image-set()，只要没把背景图或图片的渲染尺寸对齐设计稿原始 CSS 像素值，高清资源就只是摆设。这个逻辑尺寸就是你的设计稿基准——比如 Figma 里标的是 24×24px，那所有适配动作最终都要让这张图在页面上占据 24×24 CSS 像素的空间，不多不少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
