min-resolution: 2dppx 是首选判断依据，因其直接映射设备像素比且不受系统缩放干扰；需用逗号分隔搭配 -webkit-min-device-pixel-ratio: 2 以兼容 ios 9–12 safari。
只用 min-resolution: 2dppx 就能稳定命中主流 Retina 屏，但必须搭配 @media (-webkit-min-device-pixel-ratio: 2) 才能覆盖旧版 iOS Safari（iOS 9–12）；混写 192dpi 或错误嵌套条件反而会导致高清样式错配到普通屏。
为什么 min-resolution: 2dppx 是首选判断依据
dppx 是设备像素比（DPR）的直接映射：1dppx = 普通屏，2dppx = 1 个 CSS 像素由 ≥2×2 物理像素渲染——这正是 Retina 的核心定义。它不依赖系统 DPI 设置或缩放比例，因此在 Windows 高缩放（如 125%）、macOS “缩放分辨率”开关开启时依然可靠触发。
而 min-resolution: 192dpi 是物理密度单位，实际表现受操作系统干扰极大：同一台 MacBook Pro 在默认缩放和“更多空间”模式下，192dpi 可能根本不会匹配；Chrome 和 Firefox 已明确建议弃用 dpi 作为 Retina 判断依据。
-
2dppx兼容 Chrome 29+、Firefox 16+、Safari 8+、Edge 12+ - 不要写
min-resolution: 2dppx, 192dpi—— 逗号是“或”逻辑，192dpi可能在非 Retina 设备上意外命中 - 避免
min-resolution: 2dppx和-webkit-min-device-pixel-ratio: 2用and连接，例如@media (min-resolution: 2dppx) and (-webkit-min-device-pixel-ratio: 2)，旧版 Safari 会同时要求两个条件，结果全都不触发
如何正确写媒体查询兜底旧版 iOS Safari
iOS 9–12 的 Safari 不支持 min-resolution，但又不能和现代语法合并判断。唯一可靠写法是用逗号分隔两个独立条件：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.icon {
background-image: url("icon@2x.png");
background-size: 24px 24px; /* 必须显式设回逻辑尺寸 */
}
}
-
-webkit-min-device-pixel-ratio是浮点值，写2即可，别写2.0（部分旧 Safari 会拒识） - 基础样式必须先定义 1x 图：
background-image: url("icon.png")，媒体查询内再覆盖为 2x - 兜底规则必须放在顶层，不能嵌套在类选择器内部（CSS 原生不支持）
background-image 换了 @2x 图还是糊？关键在 background-size
只换图不调尺寸，高清图反而更糊。浏览器默认把 icon@2x.png（比如 200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。
- 如果容器本身宽高是
24px 24px，那就得写background-size: 24px 24px，不是按图文件尺寸硬套 - 文件名和物理尺寸必须严格对应：
icon@2x.png就得是原图宽高的 2 倍；否则就算媒体查询命中、background-size写对，图也会糊——位图没多出像素信息可补 - 矢量图标（SVG）天然适配，无需媒体查询，优先考虑用 SVG 替代位图
伪元素实现真·1px 边框的注意事项
Retina 屏上 border: 1px 实际渲染为 2 物理像素，视觉变粗。纯 CSS 最稳方案是伪元素 + transform: scale()：
- 父元素必须设
position: relative - 伪元素用
height: 1px+background-color，别用border-bottom: 1px（受box-sizing影响） -
transform-origin显式写成left bottom（单边下边框）或0 0（四边），否则缩放中心偏移 - 加
-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不稳定 - 四边边框时，伪元素需设
width: 200%、height: 200%，再用transform: scale(0.5)
最易被忽略的是：所有这些都建立在 viewport 正确声明的前提下——漏写 <meta name="viewport" content="width=device-width, initial-scale=1">，媒体查询根本不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
