--icon-size: 16px 不适合动态缩放，因为 px 是绝对单位，切断了 svg 图标对父级 font-size 的 em 继承链，导致无法随文本流、系统缩放或响应式变化自适应；应改用 --icon-scale 比例变量配合 calc(var(--icon-scale) * 1em) 实现真正继承与弹性缩放。
直接用 --icon-size: 16px 控制 SVG 图标尺寸，在响应式或深色模式切换时会失效——它切断了与父级 font-size 的继承链，图标大小不再随文本流缩放。
为什么 --icon-size: 16px 不适合动态缩放
像素值是绝对单位，写死就脱离上下文。比如按钮设了 font-size: 18px，但图标仍按 16px 渲染，视觉比例失衡；用户放大系统字体或开启强制缩放时，图标也不会同步变大。
- SVG 内联图标依赖
em才能继承父级字号，px值绕过了这层继承 - Font Awesome 7 的
--fa-icon-size默认是1em，不是16px - 构建工具（如 SVGR）清理内联
fill后，若尺寸还用px，就只剩“固定大小+可变颜色”，失去响应弹性
用无单位比例变量 + calc() 实现真正继承
把尺寸定义成比例系数，使用时再结合 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 用 --fa- 前缀，--fa-icon-size 默认是 1em；css.gg 用 --css-gg- 前缀，--css-gg-size 默认是 24px——这个 px 值就是它不响应缩放的根源。
- 如果项目里同时用两者，别让
:root里两个--size变量互相覆盖 - 建议统一抽象一层：
--icon-scale，再在局部选择器里映射到具体库的变量，例如：.fa-icon { font-size: calc(var(--icon-scale) * 1em); } - 注意作用域：变量必须定义在能被 SVG 容器访问的位置，否则
calc()读不到值
容易被忽略的关键点：作用域链与嵌套继承
真正麻烦的不是怎么写变量，而是变量在哪一级生效、被谁继承、有没有被更高特异性的规则截断——尤其是当图标嵌套在按钮、卡片、表单控件里时，font-size 层层嵌套，currentColor 和 em 的联动关系必须全程对齐，漏掉一层，图标就“卡”在某个尺寸不动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
