CSS媒体查询适配Retina屏幕的方法

先说结论：直接用 @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

只换图不调尺寸，高清图反而更糊，这事儿经常被忽略。浏览器默认会把 icon@2x.png（比如 200×200px）当成 200×200 CSS 像素渲染，等于放大两倍显示，细节全丢。

• 原图 icon.png 是 100×100px → 逻辑尺寸就是 100px 100px
• @2x 图 icon@2x.png 是 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("icon@2x.png");

还有一个最容易忽略的点：文件名和物理尺寸必须严格对应。如果你写 icon@2x.png，那它的像素尺寸就得是原图的两倍；否则即便媒体查询命中、background-size 写对，图还是会糊——因为位图根本没多出像素信息可供补充。