必须用min-resolution: 2dppx而非192dpi或单独-webkit-min-device-pixel-ratio: 2，因2dppx是纯逻辑比值、不依赖系统缩放，语义准确且兼容Chrome 29+、Firefox 16+等主流浏览器；192dpi受Windows高缩放干扰易失效，后者已逐步弃用。
直接用 min-resolution: 2dppx 判断，别碰 192dpi 或单独用 -webkit-min-device-pixel-ratio: 2 —— 前者在 Windows 高缩放下常失效，后者已逐步弃用，且兼容性断层明显。
为什么必须用 2dppx 而不是 192dpi
dppx 是纯逻辑比值：1dppx = 1 CSS 像素对应 1×1 物理像素，2dppx 明确表示 1 CSS 像素由 ≥2×2 物理像素渲染。它不依赖系统物理英寸或缩放设置，语义准确、兼容性好（Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ 都支持）。
192dpi 是绝对物理密度单位，实际表现受系统 DPI 设置、浏览器缩放、甚至 macOS 的“缩放分辨率”开关干扰。比如 Windows 笔记本设为 125% 缩放时，min-resolution: 192dpi 很可能不触发，而 min-resolution: 2dppx 依然稳稳命中。
- 错误写法：
@media (min-resolution: 2dppx), (min-resolution: 192dpi)—— “或”逻辑，192dpi可能在非 Retina 设备上意外匹配，高清样式错配 - 语法错误：
min-resolution: 2dppx, 192dpi—— 浏览器会当成两个并列条件，不是单位换算 - 旧版 iOS Safari（≤ iOS 8）需兜底，但必须用逗号分隔独立条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)
background-image 换了 @2x 图还是模糊？
只换图不调尺寸，高清图反而糊——浏览器默认把 icon@2x.png（200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。
立即学习“前端免费学习笔记（深入）”；
关键动作是显式设 background-size 回逻辑尺寸：
- 原图
icon.png是 100×100px → 逻辑尺寸就是100px 100px - @2x 图
icon@2x.png是 200×200px →background-size必须写成100px 100px - 如果容器本身宽高是
50px，那background-size就得是50px 50px，不是按图文件尺寸硬套 - 千万别漏掉
background-size：媒体查询里只换background-image，不设尺寸，等于白换
border: 1px 在 Retina 屏变粗，怎么写才真·1px？
直接写 border-width: 0.5px 不可靠：iOS 8+ 支持，但旧 Safari 和多数安卓 WebView 会忽略或向上取整；0.333px 在 DPR=3 设备上会被 CSS 解析器直接丢弃。
目前最稳的纯 CSS 方案是伪元素 + transform: scale()：
- 父元素必须设
position: relative - 伪元素用
height: 1px+background-color，别用border-bottom: 1px（受box-sizing影响） -
transform-origin显式写成left bottom（单边下边框）或0 0（四边），否则缩放中心偏移 - 加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定 - 四边边框时，伪元素需设
width: 200%、height: 200%，再transform: scale(0.5)
真正容易被忽略的是：所有适配都建立在「逻辑像素」这个前提上。DPR 变化时，CSS 像素不变，但背后物理像素数翻倍——这意味着你写的 16px 字体、1px 边框、100px 宽度，都要重新评估它在不同 DPR 下是否仍符合视觉预期。不是加个媒体查询就完事，而是要从设计源头确认逻辑尺寸是否可缩放、资源是否按比例提供、渲染是否被意外拉伸。
