更稳妥的Retina背景图媒体查询应同时使用(-webkit-min-device-pixel-ratio: 2)、(min-resolution: 192dpi)和(min-resolution: 2dppx)，并配合Sass mixin封装，确保@2x图路径正确、background-size一致，且构建时同步发布@2x资源。
Retina背景图查询的媒体查询写法
直接用 @media (-webkit-min-device-pixel-ratio: 2) 不够可靠，Safari 14+ 和 Chrome 100+ 已逐步弱化对私有前缀的支持。更稳妥的方式是同时覆盖 min-resolution: 192dpi（等价于 2x）和 min-resolution: 2dppx（标准单位），后者被现代浏览器广泛支持。
-
1dppx= 1 device pixel per CSS pixel，即 1x；2dppx才真正对应 Retina 屏逻辑 - Windows 高 DPI 设备（如 Surface）可能触发
192dpi，但不一定是 2x 缩放，优先用dppx - 不要只写
min-resolution: 2dppx，IE 和旧版 Safari 不识别，需 fallback
Sass中封装Retina背景图的mixin
手动重复写媒体查询太容易出错，用 mixin 抽离逻辑最实际。关键点不是“生成两套图片”，而是“只在需要时替换 background-image，其他属性（如 size、position）保持复用”。
@mixin retina-bg($image-path, $width: auto, $height: auto) {
background-image: url($image-path);
background-size: $width $height;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
background-image: url('#{$image-path}@2x');
}
}
- 传入的
$image-path应为不带@2x后缀的原始路径，比如"icons/home.png" - 务必保留原图的
background-size，否则高清图会拉伸——@2x图像像素是原图 2 倍，但 CSS 尺寸不变，所以必须设为background-size: 100% 100%或具体宽高 - 如果项目用 Webpack 或 Vite，
@2x文件需真实存在，且构建工具未自动重命名（否则路径失效）
处理 SVG 与 PNG 混合场景
SVG 本身矢量、无分辨率概念，不需要 @2x 版本，但混用时容易误配。Sass 无法自动判断文件类型，得靠约定或额外参数控制。
- 对 SVG 资源，直接忽略 Retina 查询：
background-image: url("logo.svg");即可 - 若 mixin 要兼容 SVG，加一个布尔开关：
@mixin retina-bg($image-path, $is-svg: false)，内部跳过媒体查询 - 混合使用时注意：PNG 的
background-size常设为contain或具体值，而 SVG 多用100% 100%，混用易导致缩放不一致
构建阶段遗漏@2x文件的典型报错
开发时一切正常，上线后高清屏背景图 404，常见原因是构建流程没把 @2x 文件复制过去，或路径拼接出错。错误信息通常是：GET /assets/icons/home@2x.png 404 (Not Found)。
立即学习“前端免费学习笔记（深入）”；
- 检查打包后 dist 目录下是否存在对应
@2x文件，尤其注意 Webpack 的file-loader或 Vite 的public目录规则 - 路径中含变量时（如
url('#{$base-url}#{$icon}.png')），Sass 编译期无法校验文件存在性，只能靠构建脚本提前验证 - CI 环境常因 .gitignore 忽略了
@2x文件（比如写了*@2x*），导致漏传
真正的麻烦不在写法，而在资源管理和构建一致性——@2x 图必须和普通图同步发布，且路径严格匹配，否则媒体查询一触发就白屏。
