直接写@media易失效，因重复书写冗余、漏设background-size、路径拼错；min-resolution:192dpi误判dpr，应统一用2dppx；svg需隔离处理，@2x路径须真实存在且不被构建工具重命名。
为什么直接写 @media 查询容易失效
手动为每个图标重复写 @media (-webkit-min-device-pixel-ratio: 2) 和 @media (min-resolution: 2dppx) 不仅冗余，还极易漏掉 background-size 重置或路径拼错。更关键的是，min-resolution: 192dpi 这类写法在 Windows 缩放 + Chrome 混合场景下会误触发——它查的是物理 DPI，而实际需要判断的是设备像素比（dpr）。现代项目应统一用 min-resolution: 2dppx，它稳定对应 dpr ≥ 2 的所有主流 Retina / HiDPI 屏。
@mixin retina-bg() 必须控制 background-size 的逻辑尺寸
高清图不是“换张大图就完事”，而是让 CSS 渲染尺寸（比如 24px 24px）保持不变，同时加载物理像素翻倍的资源。否则 @2x 图会被拉伸成两倍大小，反而模糊。所以 mixin 内必须显式设置 background-size，且值应为设计稿中的逻辑尺寸，不能是 auto 或留空。
-
$width和$height参数默认设为auto是危险的，应强制要求传入具体值，如24px 24px - 若图标本身是 SVG，
@2x路径不应生成，否则构建时 404；需额外加$is-svg: false参数开关 - 路径拼接必须用
'#{$image-path}@2x'，不能写成'#{image-path}@2x'（漏了$就是变量名字面量）
image-set() 在 SCSS 中不能替代媒体查询
image-set() 看似简洁，但它在 Firefox 中完全不解析、IE 中直接报错，且不支持 fallback 降级到 url() —— 浏览器忽略整个声明后，不会回退到前一行的 url()。SCSS 里写：
background-image: url("icon.png");
background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);
看似有兜底，实则 Safari/Chrome 会用 image-set()，Firefox 会跳过第二行、但第一行已被覆盖（CSS 后声明优先），结果是空白。真正安全的做法仍是媒体查询 + url()，兼容性覆盖 2026 年所有主流引擎。
Webpack/Vite 项目中 @2x 文件必须真实存在且路径未被重命名
构建工具若开启图片压缩、hash 或自动重命名（如 icon.a1b2c3.png），SCSS 中硬写的 "icon@2x.png" 就会 404。此时不能靠 Sass 变量动态拼 hash，而应在构建配置中保留原始文件名约定，或改用 srcset + <img> 方案——SCSS 只管样式，资源路径交给 HTML 或 JS 控制更可靠。
最易被忽略的一点：SVG 图标混入位图组件时，@mixin retina-bg() 若没做类型判断，会无差别给 SVG 加 @2x 后缀，导致请求失败。这不是 Sass 能自动识别的，得靠团队约定路径前缀（如 svg/icon-home.svg）或显式传参隔离处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
