如何使用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 设置正确，图片依然会模糊——因为位图本身并未提供额外的像素信息可供补充。