如何用CSS媒体查询针对Retina屏幕进行适配

直接用@media (min-resolution: 2dppx)可稳定识别主流Retina屏，但需搭配(-webkit-min-device-pixel-ratio: 2)覆盖旧版iOS Safari；192dpi受系统缩放干扰易失效，而2dppx直连DPR更可靠；换@2x图必须显式设background-size为逻辑尺寸，否则高清图反糊。

直接用 @media (min-resolution: 2dppx) 就能稳定识别主流 Retina 屏，但只写这一条会漏掉旧版 iOS Safari；必须搭配 @media (-webkit-min-device-pixel-ratio: 2) 才能全端覆盖。

为什么 min-resolution: 192dpi 经常失效

这不是浏览器 bug，而是单位误用。dpi 值受系统缩放干扰极大——比如 Windows 笔记本设 125% 缩放时，min-resolution: 192dpi 可能根本不会触发；而 2dppx 直接对应设备像素比（DPR），不依赖物理英寸或系统 DPI 设置，Safari 14+、Chrome、Firefox 全支持。

• 1dppx = 1 CSS 像素 = 1 物理像素（普通屏）
• 2dppx = 1 CSS 像素由至少 2×2 物理像素渲染（Retina 核心特征）
• 混写 @media (min-resolution: 2dppx), (min-resolution: 192dpi) 是危险操作：逗号是“或”逻辑，192dpi 在高缩放场景下可能意外命中，把 2x 样式错加到非 Retina 设备上

@media 规则里 background-image 必须配 background-size

只换图不调尺寸，高清图反而更糊。浏览器默认把 [email protected]（比如 200×200px）当 200×200 CSS 像素渲染，结果放大两倍显示，细节全丢。

• 原图 icon.png 是 100×100px → 逻辑尺寸就是 100px 100px
• @2x 图 [email protected] 是 200×200px → background-size 必须显式写成 100px 100px
• 如果容器本身宽高是 50px，那 background-size 就得是 50px 50px，不是按图文件尺寸硬套
• 漏掉这一步，@media 再准也没用

兜底写法必须用逗号分隔，不能套在同一个括号里

旧版 iOS Safari（iOS 9–12）不支持 min-resolution，但又不能和现代语法合并判断——错误写法 @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");
• 媒体查询内才覆盖为 2x：background-image: url("[email protected]");

最易被忽略的点：文件名和物理尺寸必须严格对应。写 [email protected]，它就得是原图宽高的 2 倍；否则就算媒体查询命中、background-size 写对，图也会糊——因为位图没多出像素信息可补。