直接用@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；必须搭配 @media (-webkit-min-device-pixel-ratio: 2) 才能全端覆盖。
为什么 min-resolution: 192dpi 经常失效
这不是浏览器 bug，而是单位误用。dpi 值受系统缩放干扰极大——比如 Windows 笔记本设 125% 缩放时，min-resolution: 192dpi 可能根本不会触发；而 2dppx 直接对应设备像素比（DPR），不依赖物理英寸或系统 DPI 设置，Safari 14+、Chrome、Firefox 全支持。
-
1dppx= 1 CSS 像素 = 1 物理像素（普通屏） -
2dppx= 1 CSS 像素由至少 2×2 物理像素渲染（Retina 核心特征） - 混写
@media (min-resolution: 2dppx), (min-resolution: 192dpi)是危险操作：逗号是“或”逻辑，192dpi在高缩放场景下可能意外命中，把 2x 样式错加到非 Retina 设备上
@media 规则里 background-image 必须配 background-size
只换图不调尺寸，高清图反而更糊。浏览器默认把 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，不是按图文件尺寸硬套 - 漏掉这一步，
@media再准也没用
兜底写法必须用逗号分隔，不能套在同一个括号里
旧版 iOS Safari（iOS 9–12）不支持 min-resolution，但又不能和现代语法合并判断——错误写法 @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 写对，图也会糊——因为位图没多出像素信息可补。
