<p>--icon-size: 16px 不适合响应式，因其为绝对单位，脱离父级 font-size 继承链，无法随文本流缩放；应改用无单位的 --icon-scale（如 1.2），配合 calc(var(--icon-scale) * 1em) 实现真正可继承、可缩放的图标尺寸。</p>
直接用 --icon-size: 16px 定义图标尺寸，会在响应式场景下失效——它和父级 font-size 脱钩，无法随文本流缩放。
为什么 --icon-size: 16px 不适合响应式图标
像素值是绝对单位，一旦写死，就切断了与上下文的关联。比如按钮设置了 font-size: 18px，但图标仍按 16px 渲染，视觉比例失衡；深色模式切换或用户放大字体时，图标也不会同步变大。
- SVG 内联图标依赖
em单位才能继承父级字号，px值绕过了这层继承链 - Font Awesome 7 的
--fa-icon-size默认也是带单位的（如1.25em），不是16px - 构建工具（如 SVGR）清理内联
fill后，若尺寸还用px，就只剩“固定大小+可变颜色”，失去响应弹性
--icon-scale 比 --icon-size 更可控
把变量定义成无单位比例系数，使用时再结合 1em 计算，才是真正可继承、可缩放的方案。
- 在
:root或组件容器上声明：--icon-scale: 1.2 - 图标 CSS 中写：
width: calc(var(--icon-scale) * 1em); height: calc(var(--icon-scale) * 1em) - 这样父元素
font-size: 20px→ 图标宽高 =1.2 × 20px = 24px；父元素缩到14px→ 图标自动变成16.8px - 媒体查询中只需改
--icon-scale，不用重复写多套px值
Font Awesome 7 和 css.gg 的变量命名差异要留意
不同库的 CSS 变量前缀和语义不一致，混用时容易覆盖或失效。
立即学习“前端免费学习笔记（深入）”；
- Font Awesome 7 用
--fa-前缀，尺寸变量是--fa-icon-size（默认1em）或--fa-size-lg（对应1.5em） - css.gg 用
--css-gg-前缀，--css-gg-size默认是24px—— 这个px值就是它默认不响应缩放的根源 - 如果你在同一个项目里同时用两者，别让
:root里两个--size变量互相干扰；建议统一用--icon-scale抽象层，在局部选择器里映射到具体库的变量
真正麻烦的不是怎么写变量，而是变量在哪一级作用域生效、被谁继承、有没有被更高特异性的规则截断——尤其是当图标嵌套在按钮、卡片、表单控件里时，font-size 层层嵌套，currentcolor 和 em 的联动关系必须全程对齐，漏掉一层，图标就“卡”在某个尺寸不动了。
