svg在高dpi屏模糊的根因是未设viewbox、用px固定尺寸或img加载位图式缩放；解决关键是inline svg+viewbox+em单位，禁用width/height像素值，避免transform缩放与固定stroke-width。
SVG图标在高DPI屏幕下模糊怎么办
直接原因：用px固定宽高、没设viewBox、或用img标签加载位图式缩放SVG。浏览器对SVG的渲染依赖坐标系统，不是像素网格——不声明viewBox时，它会按原始尺寸（比如16×16）强行拉伸，高密度屏上就糊。
- 必须给
<svg></svg>加viewBox属性，例如viewBox="0 0 24 24"，这是让SVG响应式缩放的唯一可靠基础 - 避免用
width/height写死px值；改用em、rem或无单位数值（如width: 1.5em） - 如果用
<img src="icon.svg">，确保SVG文件本身已定义viewBox且无width/height属性（否则会被忽略）
CSS控制SVG图标尺寸时哪些属性会失效
font-size能驱动em-系尺寸，但line-height、vertical-align、transform: scale()容易引发意外偏移或锯齿——尤其在iOS Safari里，transform缩放SVG可能触发光栅化。
-
width/height设为1em或1.2rem是安全的，前提是<svg></svg>有viewBox - 慎用
transform: scale(1.5)：它不改变布局盒，但可能让描边变粗、文字模糊，且无法被device-pixel-ratio自动补偿 -
vertical-align: middle比baseline更稳，因为SVG默认基线对齐方式在不同浏览器中不一致
如何让SVG图标随文本大小自动等比缩放
核心是把SVG当“字体字符”用：用inline SVG + em单位 + viewBox，这样它就能像<span></span>一样继承font-size并等比变化。
- 把SVG代码内联进HTML（不要
<img>），并移除width/height属性 - 给
<svg></svg>设width: 1em; height: 1em;，再通过父元素的font-size统一调控 - 如果图标需要居中对齐文本，加
vertical-align: -0.125em（微调常见图标下沉量）
示例：
<span style="font-size: 16px"><svg viewbox="0 0 24 24" width="1em" height="1em">...</svg>设置</span>——此时SVG宽高就是16px，缩放完全跟随文本。
适配不同设备像素比时要不要写media query
不用。SVG原生支持任意分辨率缩放，只要viewBox存在且CSS尺寸用相对单位，device-pixel-ratio的影响就被自动吸收了。写@media (-webkit-min-device-pixel-ratio: 2)只对位图有意义，对SVG反而增加维护负担。
- 唯一需要media query的场景：图标内容需随屏幕宽度切换（比如小屏隐藏文字只留图标），这不是DPI问题，是信息密度问题
- 如果用CSS自定义属性控制图标尺寸，可以这样写：
--icon-size: 1.2rem;，然后width: var(--icon-size);——比写多套media更干净 - 注意：某些旧版Android WebView对
rem支持不稳定，生产环境建议优先用em或ch
真正要盯住的是viewBox是否漏写、SVG是否被外层容器用max-width截断、以及是否意外引入了stroke-width固定像素值——这些才是高DPI下模糊的根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
