如何通过Sass编写适配Retina高清屏的CSS背景图查询？-css教程-PHP中文网

更稳妥的retina背景图媒体查询应同时使用(-webkit-min-device-pixel-ratio: 2)、(min-resolution: 192dpi)和(min-resolution: 2dppx)，并配合sass mixin封装，确保@2x图路径正确、background-size一致，且构建时同步发布@2x资源。

如何通过sass编写适配retina高清屏的css背景图查询？

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 无法自动判断文件类型，得靠约定或额外参数控制。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

对 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 图必须和普通图同步发布，且路径严格匹配，否则媒体查询一触发就白屏。