min-resolution: 2dppx 是当前兼容性好、语义准确的retina屏判断方式，替代已不推荐的-webkit-min-device-pixel-ratio: 2；需配合background-size显式设回逻辑尺寸，避免高清图因未缩放而模糊。
用 min-resolution: 2dppx 判断 Retina 屏最稳
别再依赖 -webkit-min-device-pixel-ratio: 2 单独判断，它在新版 Safari 和部分安卓浏览器里已不推荐；min-resolution: 2dppx 才是当前兼容性好、语义准确的写法。dppx 是“dots per CSS pixel”，1dppx = 1 个逻辑像素对应 1×1 物理像素，2dppx 就代表 1 个 CSS 像素由至少 2×2 物理像素渲染——这正是 Retina 屏的核心特征。
常见错误现象：min-resolution: 192dpi 在 Windows 缩放 125% 的笔记本上经常失效，因为 dpi 值受系统缩放干扰大；而 dppx 不依赖物理英寸，只看设备像素比，更可靠。
实际使用时建议这样写：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
/* 双条件兜底，覆盖老 Safari（iOS ≤ 8）和现代浏览器 */
}
background-image 换 @2x 图必须配 background-size
只换图不调尺寸，高清图反而会糊——浏览器默认把 icon@2x.png（比如 200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。
关键动作是显式设 background-size 回逻辑尺寸：
- 原图
icon.png是 100×100px → 逻辑尺寸就是 100×100px - @2x 图
icon@2x.png是 200×200px → 对应的background-size必须写成100px 100px - 如果容器本身宽高是
50px，那background-size就得是50px 50px，不是按图文件尺寸硬套
漏掉这一步，@media 再准也没用。
为什么不能混用 dpi 和 dppx 在同一个媒体查询里
像 @media (min-resolution: 2dppx), (min-resolution: 192dpi) 这种写法看似保险，实则危险：多条件媒体查询是“或”逻辑，只要任一条件成立就触发。而 192dpi 在某些缩放场景下可能意外命中（比如 Chrome 高缩放 + 高 PPI 笔记本），导致高清样式被错误应用到非 Retina 设备上。
正确做法是：
- 只用
dppx单位（1dppx、2dppx、3dppx）做分层适配 - 旧版 iOS Safari 必须加
-webkit-min-device-pixel-ratio兜底，但它是独立条件，用逗号分隔，不是混在同一括号里 - 避免写
min-resolution: 2dppx, 192dpi这类语法——浏览器会当成两个并列条件，不是单位换算
srcset 和媒体查询不是一回事，别指望它自动适配 Retina
srcset 解决的是 <img> 标签的响应式图片选择，靠的是宽度描述符（如 400w）和 sizes 属性推算渲染宽度，跟设备像素比无关。即使你写了 srcset="logo@2x.jpg 2x"，若没配 sizes 或父容器宽度不确定，浏览器大概率还是选 1x 图。
真正需要 Retina 适配的图标、装饰性背景图，必须走 CSS 媒体查询 + background-image 路线。这点容易混淆，尤其当团队同时用 img 和 div 做图标时，两边逻辑不统一就会出现一半清晰一半糊的情况。
复杂点在于：设备像素比不是离散开关，而是连续值（1.25、1.5、2、3），2dppx 能覆盖绝大多数 Retina 屏，但对 Windows 1.5x 缩放屏或 iPad Pro 3x 屏，需额外考虑 3dppx 分支，且 background-size 要随比例动态调整——这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
