最可靠Retina判断方式是逗号并列(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)，因min-resolution: 192dpi依赖系统缩放易误判，而旧版iOS Safari不支持min-resolution需WebKit前缀兜底。
min-resolution: 2dppx 是目前最可靠、语义最准确的 Retina 判断方式，但单独写它会漏掉旧版 iOS Safari；必须用逗号并列 (-webkit-min-device-pixel-ratio: 2) 才能真正覆盖全平台。
为什么不能只写 min-resolution: 192dpi
这不是浏览器 bug，而是单位误用。dpi 是物理密度单位，严重依赖系统缩放设置——比如 Windows 笔记本设了 125% 缩放，min-resolution: 192dpi 可能完全不触发；而 2dppx 直接对应设备像素比（DPR），和屏幕实际渲染逻辑一致，Safari 14+、Chrome、Firefox 全支持。
常见错误现象：@media (min-resolution: 192dpi), (min-resolution: 2dppx) 看似保险，实则危险：逗号是“或”逻辑，192dpi 在高缩放下可能意外命中，把 2x 样式错加到非 Retina 设备上。
-
1dppx= 普通屏（1 CSS 像素 = 1 物理像素） -
2dppx= Retina 核心特征（1 CSS 像素由 ≥2×2 物理像素渲染） -
192dpi ≈ 2dppx仅在 96dpi 基准下成立，但现代系统早已不按此映射
为什么 min-resolution: 2dppx 有时也不生效
根本原因是浏览器对 min-resolution 的解析逻辑与设备实际 DPR 不完全对齐。例如 iPhone 13（DPR=3）可能只触发 2dppx 规则，Chrome 在 150% 系统缩放下可能报告 2.25dppx，导致漏掉纯 2dppx 条件。
立即学习“前端免费学习笔记（深入）”；
旧版 iOS Safari（iOS 9–12）压根不支持 min-resolution，但又不能和 WebKit 语法合并判断——错误写法 @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")，媒体查询内才覆盖为url("icon@2x.png")
换 @2x 图后为什么反而更糊
只换图不调 background-size，高清图一定会糊。浏览器默认把 icon@2x.png（比如 200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。
必须显式设 background-size 为逻辑尺寸——如果容器本身宽高是 100px × 100px，那就得是 background-size: 100px 100px，不是按图文件尺寸硬套。
- 兜底写法必须用逗号分隔，不能套在同一个括号里
- Sass / Less 封装时，
@mixin retina-bg或.retina-bg必须传入原始路径（如"logo.png"），并在媒体查询内补@2x后缀 -
background-size值必须和原始图对应的 CSS 尺寸严格一致，否则缩放失真
最容易被忽略的一点：所有 @media 规则里的 background-image 更换，都必须同步重置 background-size，哪怕你用的是 100% 100% 或 contain —— 因为图像像素翻倍后，CSS 渲染引擎不会自动按比例缩放逻辑尺寸。
