@include retina() 不自动适配，仅编译时生成静态媒体查询；清晰显示取决于@2x文件存在、background-size显式设置正确、部署路径可达，常见模糊因404、尺寸未缩放或position未居中。
@include retina() 本身不自动适配，它只是编译时生成固定媒体查询规则；能否清晰显示，完全取决于你有没有提供对应命名的 @2x.png 文件、background-size 是否显式设对、以及部署路径是否真实可达。
为什么写了 @include retina("icon.png") 还是模糊
常见错误现象：开发者工具里看到 @media (-webkit-min-device-pixel-ratio: 2) 规则被命中，但 Network 面板显示 icon@2x.png 返回 404；或者图加载成功，但边缘发虚、拉伸变形。
- 文件名不匹配：
@include retina("icon.png")默认拼出icon@2x.png，但你实际放的是icon_2x.png或icon@2x.jpg - 路径没走通：SCSS 编译后路径是
../img/icon@2x.png，但 Webpack/Vite 的public目录结构或 CDN 配置导致该路径 404 -
background-size没补全：mixin 默认可能只设background-size: auto，而高分图必须缩放到逻辑尺寸（比如容器宽高是24px，就得写background-size: 24px 24px） - 漏了
background-position: center：如果用了cover或contain，且图不是居中裁剪设计，默认行为可能偏移
@include retina() 的参数顺序和默认值陷阱
不同项目引入的 _retina.scss 实现差异很大，参数顺序常不一致。比如有的版本是 ($path, $ratio, $size, $position)，有的是 ($path, $size, $ratio)，而 $size 默认值可能是 auto，也可能是 100% 100%。
- 永远显式传
$size，别信默认值 —— 传cover或24px 24px，避免auto导致拉伸 - 传
$ratio: 2只生成@2x查询；要同时支持 2x 和 3x，得确认 mixin 是否支持多级判断（多数不支持，需手动加第二层@media） - 不要混用
retina-bg()和retina()：前者常省略no-repeat或background-origin，容易覆盖基础样式 - 若项目用 WebP/AVIF，mixin 不会自动替换后缀，得自己扩展
replace()逻辑或改用image-set()
比 @include retina() 更稳的替代方案
直接写 image-set() 是运行时决策，浏览器按当前 dpr 自动选源，不用预生成媒体查询，也不依赖文件命名规范。
立即学习“前端免费学习笔记（深入）”；
background-image: image-set("icon.png" 1x, "icon@2x.png" 2x, "icon@3x.png" 3x);- 兼容性注意：Safari 9+、Chrome 39+ 支持，IE/Edge 18- 不支持，需 fallback 到传统 media query
- 它不解决路径 404 问题，但规避了 “mixin 参数写错 → 媒体查询白生成” 的调试成本
- 构建工具（如 Vite）不会解析
image-set()里的路径，仍需确保@2x.png文件真实存在并正确发布
最易被忽略的一点：伪元素（::before/::after）用 @include retina() 时，必须显式写 content: "" + display: block + 尺寸，否则背景图根本不会渲染——mixin 再准也没用。
