background-size 比换图更关键，因未设置时高 dpr 下图标被放大导致模糊；image-set() 需正确书写单位、引号及 fallback，且必须配合 media query 兜底并统一声明 background-size。
直接用 background-image: url("icon@2x.png") 不行——低分屏会多下大图，高分屏若没配 background-size 仍模糊；image-set() 是原生方案，但不支持 Firefox 和旧 Edge，必须写 fallback。
为什么 background-size 比换图更关键
很多开发者花时间准备 icon@2x.png，却忘了设 background-size。结果高 DPR 下图被按原始尺寸渲染：一张 48×48px 的 @2x 图，若容器是 24×24px 且没设 background-size: 24px 24px，浏览器就把它当 48×48 CSS 像素铺开，视觉上放大一倍、边缘发虚。
-
background-size: 24px 24px强制缩放到逻辑尺寸，是清晰前提 -
background-size: cover在不同 DPR 下缩放比例不一致，容易裁掉图标关键区域 - 伪元素（如
::before）必须同时设content: ""+ 显式width/height+background-size，否则无渲染区域
image-set() 的正确写法和致命坑
image-set() 看似简洁，但错一个字符就整条声明失效，尤其 Safari 会因任意一项 404 直接丢弃整条 background-image 声明，导致背景空白。
- 单位必须带
x："icon.png" 1x✅，"icon.png" 1❌ - 路径必须加引号：
"icon@2x.png"（尤其含空格或@符号时） - fallback 必须写在前面：
background-image: url("icon.png"); background-image: image-set("icon.png" 1x, "icon@2x.png" 2x); - Webpack/Vite 默认不处理
image-set()内路径，别用~assets/别名，改用相对路径或配置 URL loader
兼容所有浏览器的兜底方案
只靠 image-set() 无法覆盖 Firefox 和 IE 用户，必须叠加媒体查询。但别写两套独立规则——要确保 background-size 在所有分支里都显式声明，否则 @2x 图在 Safari 9–12 或 Android Browser 里照样糊。
- 用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)覆盖主流高分屏 - 老 Opera 需补
@media only screen and (-o-min-device-pixel-ratio: 2/1) - 每个媒体查询块里都要重复写
background-size: 24px 24px，不能只写在默认样式里 - 避免混用
min-resolution: 192dpi和2dppx—— 后者更准确，前者在部分 Android 上解析异常
真正容易被忽略的是：高清图物理尺寸必须严格 ≥ 容器 CSS 尺寸 × 实际 DPR。调试时打开 DevTools 查 window.devicePixelRatio，再核对图文件真实宽高——不是“名字带 @2x”就行，48×48px 的文件才是真 @2x。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
