因为font-size对<svg>元素本身无尺寸控制作用，只影响内部<text>节点；真正起效的是width/height（如width: 1.5em; height: 1.5em），且须删掉SVG根元素的width/height属性，仅保留viewBox。
为什么直接给 svg 加 font-size 没反应？
因为 font-size 对 <svg> 元素本身无尺寸控制作用——它只影响内部文本节点（比如 <text>），不缩放路径。常见错误是把图标当字体图标用，却没意识到纯 SVG 和 Font Awesome 的渲染机制完全不同。
- 确认你用的是内联
<svg>，不是<img src="icon.svg">（后者加width/height会光栅化变糊） - 删掉 SVG 根元素上的
width和height属性（包括width="100%"或height="auto"），只保留viewBox - 真正起效的 CSS 是
width和height，例如：svg { width: 1.5em; height: 1.5em; }
怎么让 SVG 图标在媒体查询里正确响应缩放？
关键不是“在断点里改 font-size”，而是用相对单位 + 统一控制源。浏览器对 em 的解析依赖父级 font-size，而 rem 更稳定；但若父容器 font-size 波动剧烈（如 h1），建议用 px 或 clamp() 限幅。
- 推荐写法：
svg { width: clamp(1rem, 2.5vw, 1.75rem); height: auto; }（Safari 13.1+ 支持） - 避免单独设
height: auto：Firefox 和 Safari 解析不一致，易导致比例错乱；始终配对设置width和height，或用aspect-ratio: 1 / 1（Chrome 103+，需检查兼容性） - 断点值别硬编码，提取为 CSS 变量：
:root { --breakpoint-md: 768px; }，然后写@media (min-width: var(--breakpoint-md))
工具栏折叠/展开时图标尺寸怎么联动变化？
不能只靠媒体查询，得和 UI 状态绑定。比如小屏下侧边栏收起，图标从 24px 缩到 18px，同时间距压缩——这需要把尺寸定义在状态类里，而不是孤立的断点中。
- 给容器加状态类：
class="toolbar toolbar--collapsed"（小屏）或toolbar--expanded（大屏） - 图标尺寸写成：
.toolbar--collapsed .toolbar-icon { width: 1.125rem; height: 1.125rem; } - 配合自定义属性统一管理：
:root { --icon-size: 1.5rem; }，再在不同状态下重设：.toolbar--collapsed { --icon-size: 1.125rem; }，最后svg { width: var(--icon-size); height: var(--icon-size); }
为什么同一段 SVG 在 Chrome 和 Safari 里显示大小不一致？
根本原因通常是 SVG 源码里残留了 width/height 属性，或者 viewBox 值与内部路径坐标范围不匹配。Chrome 可能宽容 fallback，Safari 和 IE11 则严格按规范执行，暴露问题。
立即学习“前端免费学习笔记（深入）”；
- 必须删除 SVG 根元素所有
width、height（含百分比、auto） -
viewBox必须精确匹配路径坐标，例如所有路径都在0–24范围内，就只能写viewBox="0 0 24 24" - 确保
preserveAspectRatio="xMidYMid meet"（默认值，但显式声明更稳妥） - 外部 SVG 文件（如
<img>或 CSSbackground-image）同样要检查源文件是否含宽高属性
width="24" 和 height="24" ——它们不会报错，但会在 Safari 和旧版 Edge 中悄悄破坏响应式逻辑。每次换图标前，先用文本编辑器打开 SVG 文件删掉这两行，比后期调试快得多。 
