直接用@media (min-resolution: 2dppx)可稳定识别主流Retina屏，但需搭配(-webkit-min-device-pixel-ratio: 2)覆盖旧版iOS Safari；192dpi受系统缩放干扰易失效，而2dppx直连DPR更可靠；换@2x图必须显式设background-size为逻辑尺寸，否则高清图反糊。
直接用 @media (min-resolution: 2dppx) 就能稳定识别主流 Retina 屏，但只写这一条会漏掉旧版 iOS Safari（iOS 9–12），必须补上 @media (-webkit-min-device-pixel-ratio: 2) 才能全端覆盖。
为什么不能用 min-resolution: 192dpi
这不是浏览器 bug，而是单位误用。dpi 值受系统缩放干扰极大——比如 Windows 笔记本设 125% 缩放时，min-resolution: 192dpi 可能根本不会触发；而 2dppx 直接对应设备像素比（DPR），不依赖物理英寸或系统 DPI 设置。Safari 14+、Chrome、Firefox 全支持，且更可靠。
background-image 换图后必须配 background-size
只换图不调尺寸，高清图反而更糊。浏览器默认把 icon@2x.png（比如 200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。
-
icon.png是 100×100px → 逻辑尺寸就是100px -
icon@2x.png是 200×200px →background-size必须显式写成100px 100px - 如果容器本身宽高是
50px，那background-size就得是50px 50px，不是按图文件尺寸硬套
兜底写法必须用逗号分隔，不能套在同一个括号里
错误写法：@media (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2) 要求两个条件同时满足，结果谁都不触发。
立即学习“前端免费学习笔记（深入）”；
正确写法：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
-webkit-min-device-pixel-ratio 是浮点值，写 2 就行，别写 2.0（部分旧 Safari 会拒识）；基础样式必须先定义 1x 图：background-image: url("icon.png");，媒体查询内才覆盖为 2x：background-image: url("icon@2x.png");
最易被忽略的点：文件名和物理尺寸必须严格对应。写 icon@2x.png，它就得是原图宽高的 2 倍；否则就算媒体查询命中、background-size 写对，图也会糊。
