最可靠方案是用min-resolution: 2dppx判断Retina屏，因dppx与DPR直接对应且不受系统缩放干扰；需搭配-webkit-min-device-pixel-ratio: 2兜底；换@2x图后必须显式设background-size匹配逻辑像素尺寸。
直接用 min-resolution: 2dppx 判断 Retina 屏，别碰 192dpi 或 -webkit-min-device-pixel-ratio: 2 单独用——前者不稳定，后者已逐步弃用。
为什么必须用 2dppx 而不是 192dpi
192dpi 依赖系统物理英寸和缩放设置，在 Windows 高缩放（如 125%）或 Chrome 笔记本上常失效；dppx 是纯逻辑比值，1dppx = 1 CSS 像素对应 1×1 物理像素，2dppx 明确表示 1 CSS 像素由 ≥2×2 物理像素渲染，语义准确且兼容性好（Chrome 29+、Firefox 16+、Safari 8+、Edge 12+）。
常见错误现象：@media (min-resolution: 2dppx), (min-resolution: 192dpi) 这种写法是“或”逻辑，192dpi 可能在非 Retina 设备上意外命中，导致高清样式错配。
- 只用
dppx单位分层：比如min-resolution: 1dppx、2dppx、3dppx分别适配不同 DPR - 旧版 iOS Safari（≤ iOS 8）需兜底，但必须用逗号分隔独立条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) - 不要混写：
min-resolution: 2dppx, 192dpi是语法错误，浏览器会当成两个并列条件，不是单位换算
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，不是按图文件尺寸硬套
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)，并配合box-sizing: border-box
srcset 里写 2x 就能自动适配 Retina？
能，但前提是必须用 x 描述符，不能用 w。写成 srcset="icon-100.png 100w, icon-200.png 200w" 对 DPR 切换完全无效。
正确写法：
<img src="icon-100.png" srcset="icon-100.png 1x, icon-200.png 2x, icon-300.png 3x">
浏览器优先匹配最接近当前 window.devicePixelRatio 的项，不四舍五入——DPR=2.6 时选 2x，不是 3x；src 是 IE 全系不支持时的兜底。
注意：srcset 只管资源选择，不控制渲染尺寸。若图片在 width: 50% 容器中，必须配 sizes 属性，否则浏览器无法判断该以多少 CSS 像素渲染它。
真正容易被忽略的是：所有适配动作都建立在「逻辑像素对齐物理像素网格」这个底层前提上。哪怕媒体查询再准、图片再高清、边框缩放再精细，一旦元素坐标落在半像素位置（比如 top: 10.5px），抗锯齿就会启动，模糊就不可避免。
