用 em 替代 px 可使图标尺寸随文字大小变化，因 em 是相对于父级字体大小的相对单位，需配合 width/height: 1em、正确 viewbox 及 clamp() 实现响应式缩放。
图标尺寸不随文字大小变化？用 em 替代 px 就行
很多同学发现给图标设了 font-size: 16px，但换到标题里图标就“缩成小点”，不是图标本身有问题，是单位写死了。em 是相对于当前元素字体大小的相对单位，图标作为内联元素（比如用 ::before 或字体图标），它的 font-size 继承父级文字大小后，自然跟着缩放。
- 别用
width: 16px; height: 16px控制 SVG 或字体图标尺寸——这会切断响应链 - 改用
font-size: 1em（或0.875em等比例值），让图标尺寸始终是父文字的倍数 - 如果图标是
<svg></svg>标签，记得加height: 1em; width: 1em;，且移除viewBox外的固定宽高属性
字体图标（如 IconFont）用 em 后图标变模糊？检查 font-display 和渲染模式
用 em 缩放时，某些浏览器（尤其旧版 Chrome/Safari）会对小字号下的字体图标做亚像素渲染，导致边缘发虚。这不是单位问题，而是字体渲染策略没对齐。
- 确保引入字体时设置了
font-display: block，避免 FOIT/FOUT 干扰尺寸计算时机 - 给图标容器加
transform: translateZ(0)强制 GPU 加速，减少重绘抖动 - 避免在
font-size小于12px的场景下直接用字体图标——此时建议切 SVG Sprite 或 inline SVG
SVG 图标 inline 写法中 em 不生效？注意 viewBox 和 CSS 作用域
把 SVG 写进 HTML 里，本意是想让它随文字缩放，结果尺寸纹丝不动，大概率是 viewBox 没配对，或者 CSS 没命中正确节点。
-
<svg></svg>标签必须带viewBox（如viewBox="0 0 24 24"），否则em尺寸无法映射到内部坐标系 - 不要只设
svg { font-size: 1em; }，而要设svg { width: 1em; height: 1em; }——font-size对 SVG 元素本身无意义 - 如果 SVG 里有
<text></text>或<tspan></tspan>，它们会继承font-size，但不会影响图标主体，别误以为那是控制图标的入口
响应式断点里图标忽大忽小？用 clamp() 配合 em 更稳
纯 em 在极端字号下（比如 h1 设了 3rem）会让图标撑得过大；全靠媒体查询又太碎。现代方案是用 clamp() 把图标限制在合理区间。
立即学习“前端免费学习笔记（深入）”；
- 写成
font-size: clamp(0.875em, 1.25vw, 1.5em);——最小不小于正文图标，最大不超过视觉上限 -
1.25vw是关键：它让图标在视口变宽时缓慢增大，比纯em更符合阅读节奏 - 注意 Safari 13.1+ 才支持
clamp()，老版本需回退到max-width+ 媒体查询组合
真正难的不是写对 em，而是意识到图标从来不是独立元素——它永远活在文字流里。一旦忘了这点，再精细的单位也救不了错位的上下文。
