<p>直接用 --icon-size: 16px 会导致响应式失效，因为 px 是绝对单位，不随父元素 font-size 缩放；正确做法是定义无单位变量如 --icon-scale: 1，使用 calc(var(--icon-scale) * 1em) 动态计算尺寸，使图标随文本流响应缩放。</p>
为什么直接用 --icon-size: 16px 会导致响应式失效
因为 px 是绝对单位，一旦在根或组件上硬编码像素值，后续通过 font-size 缩放父容器时，--icon-size 不会跟着变——它和文字流脱钩了。而图标常需随文本一起缩放（比如按钮内联图标、标题旁装饰图标），这时必须让变量本身“感知”当前 em 上下文。
正确写法：把变量定义成无单位数值，乘以 1em 动态计算
核心思路是：CSS 变量不存带单位的值，只存比例系数；真正使用时再结合 1em 计算出相对尺寸。这样父元素 font-size 一变，图标尺寸自动响应。
- 定义变量：
:root { --icon-scale: 1; }（默认 1em） - 使用时：
width: calc(var(--icon-scale) * 1em); height: calc(var(--icon-scale) * 1em); - 需要小号图标？改变量：
.compact { --icon-scale: 0.75; }，所有子图标立刻按 0.75em 渲染 - 注意：
calc()中不能省略1em写成var(--icon-scale) * em，会报错
配合媒体查询做断点适配时，别覆盖变量，用级联作用域
很多人在 @media 里重复写 --icon-scale，但容易因选择器权重或顺序出错。更稳的方式是让变量继承自上下文，靠类名或容器控制。
- 错误示范：
@media (max-width: 768px) { :root { --icon-scale: 0.8; } }—— 全局生效，无法局部覆盖 - 推荐做法：
.page-header { --icon-scale: 1.2; } @media (max-width: 768px) { .page-header { --icon-scale: 1; } } - 图标组件只需写一次样式：
.icon { width: calc(var(--icon-scale) * 1em); }，无需重复 media 查询 - 额外好处：支持嵌套缩放，比如
.sidebar .icon可设--icon-scale: 0.9，自然比外层小
SVG 内联图标用 em 时要注意 viewBox 和 width/height 的配合
仅设置 width: calc(...) 不够——如果 SVG 自身 viewBox 比例不对，或没声明 height，可能拉伸或留白。
立即学习“前端免费学习笔记（深入）”；
-
viewBox必须是正方形且等比（如"0 0 16 16"），否则1em宽高会扭曲图形 - 务必同时设
width和height，都用calc(var(--icon-scale) * 1em)，避免浏览器按默认宽高比渲染 - 加
vertical-align: middle防止基线对齐导致的底部空隙 - 示例：
<svg class="icon" viewBox="0 0 16 16" width="calc(var(--icon-scale) * 1em)" height="calc(var(--icon-scale) * 1em)">...</svg>
实际最难的不是写法，而是团队协作时有人直接写死 16px 还提交 PR。建议在 CSS Lint 规则里加一条：禁止在图标相关属性中出现 px 字面量。
