SVG图标无需适配即可高清，因其为矢量格式，缩放时由渲染引擎实时重绘，无像素丢失；而PNG等位图需通过srcset、background-size或高倍图配合CSS尺寸才能在Retina屏下清晰显示。
SVG 是目前最稳妥的方案，2倍/3倍图适配只适合位图类图标（如 PNG），且必须配合 background-size 或 srcset 才能生效；直接写死 width/height 会导致 Retina 下模糊。
为什么直接用 img 标签引用 PNG 图标在 Retina 屏上会模糊
浏览器把 1 个 CSS 像素映射成多个设备像素（比如 dpr=2 时是 2×2=4 个）。如果一张 icon.png 是 24×24 像素，又用 width: 24px; height: 24px; 显示，那在 dpr=2 的屏幕上，它实际只占用了 48×48 设备像素中的一小块区域，系统会插值拉伸，结果就是发虚。
常见错误现象：
- 图标边缘毛糙、文字状细节糊成一片
- 同一页面里 SVG 图标锐利，PNG 图标明显偏软
- 必须让图像原始分辨率 ≥ CSS 尺寸 × dpr（例如：CSS 设为
24px，dpr=2 → 至少需要 48×48 像素图） - 仅靠 JS 检测
window.devicePixelRatio动态换图，不如用原生支持的方案省心 - 不设
background-size的 CSS 背景图，在 dpr＞1 时默认按原始尺寸渲染，极易失真
用 srcset + sizes 让 img 标签自动选高清图
这是现代浏览器原生支持、无需 JS、兼容性好（iOS Safari 8.0+，Android Browser 4.4+）的方案。核心是告诉浏览器：“我这张图在不同密度下该用哪张”。
使用场景：
- 图标以 alt 文本）
- 不想引入额外 JS 库或构建时处理逻辑
@@##@@
-
srcset中的1x/2x是密度描述符，不是文件名规则；icon-48.png文件本身必须是 48×48 像素 -
sizes告诉浏览器“这张图在视口宽度 ≤768px 时占 24px 宽”，否则浏览器无法正确计算所需分辨率 - 不要省略
width/height—— 防止布局偏移（layout shift）
用 background-image + @media 查询适配 PNG 图标
适用于图标作为 CSS 背景使用的场景（如按钮、伪元素、状态指示器）。关键点在于：必须显式控制背景图渲染尺寸，不能依赖图像原始大小。
参数差异：
- background-size: 24px 24px 强制将背景图缩放到指定 CSS 尺寸（哪怕图是 48×48）
- background-size: contain 或 cover 不适合图标，容易变形或裁切
.icon-settings {
width: 24px;
height: 24px;
background-image: url(icon-24.png);
background-size: 24px 24px;
}
<p>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.icon-settings {
background-image: url(icon-48.png);
background-size: 24px 24px; /<em> 这行不能少 </em>/
}
}</p>
- 媒体查询里用
min-resolution: 192dpi更通用，覆盖非 WebKit 内核（如 Firefox Android） - 所有高清图路径必须真实存在，否则 fallback 到低清图，但不会报错
- 如果图标尺寸动态变化（如响应式缩放），
background-size改用百分比或auto会失效，必须配合 JS 或 CSS 变量重算
SVG 图标为什么几乎不用适配就能高清
SVG 是矢量格式，本质是一组绘图指令（px 单位写死尺寸，就天然适配所有 dpr。
容易踩的坑：
- 用 Sketch/Figma 导出 SVG 时勾选了 “Convert text to outlines” 是好的，但若导出时强制设了 viewBox="0 0 24 24" 却又在 CSS 里写 width: 24px; height: 24px;，反而限制了缩放自由度
- 在 SVG 标签里写了 width="24" 和 height="24"（带单位默认是 px），会覆盖 CSS 控制，导致高分屏下被强制压缩
- 推荐写法：SVG 文件只保留
viewBox，去掉所有width/height属性 - 引入方式优先用
（symbol sprite），避免 HTTP 请求增多 - 如果必须用
Content-Type: image/svg+xml，否则某些安卓 WebView 会拒载
真正麻烦的从来不是“有没有高清图”，而是“有没有统一控制渲染尺寸的手段”——srcset 对 img、background-size 对背景图、viewBox 对 SVG，三者解决的是同一个底层问题：让 CSS 像素和图像内容精准对齐。漏掉任何一环，Retina 屏就会悄悄糊掉你的图标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
