CSS变量动态改盒模型尺寸需满足三个条件：box-sizing: border-box、显式单位、正确作用域；否则padding等属性无效。
CSS变量能动态改盒模型尺寸，但必须配合box-sizing: border-box和显式单位，否则改了也白改。
为什么padding: var(--padding)写了却没效果
不是语法错，是三个隐性断点同时触发：
-
padding不继承，父级设了--padding: 1rem，子元素没显式写padding: var(--padding)，那就等于没写 -
box-sizing还是默认的content-box，--padding: 16px一加，元素总宽 =width + 32px，布局当场溢出 - 变量定义在
.card里，媒体查询却在:root下重设，作用域不匹配，断点切换后值根本没更新
整站统一缩放必须从:root出发，且覆盖所有锚点
Bootstrap、Ant Design 等组件库依赖rem、em和固定像素（如border-width: 1px），只改font-size不够。正确做法是：
- 在
:root定义缩放因子：--scale: 0.85 - 重置根字号：
font-size: calc(16px * var(--scale)); - 所有硬编码像素值都按比例缩放：
border-width: calc(1px * var(--scale));、box-shadow: calc(2px * var(--scale)) 0 0 #000; -
line-height和border-radius也得同步缩放，否则视觉失衡
用--space-unit解耦语义与单位，避免rem缩放失真
直接用rem控制间距会因绑定根字体大小，导致辅助功能缩放、横竖屏切换时布局错乱。推荐方案：
立即学习“前端免费学习笔记（深入）”；
- 定义无单位变量：
:root { --space-unit: 4; } - 组件内显式乘单位：
.card { padding: calc(var(--space-unit) * 1px) calc(var(--space-unit) * 2px); } - 响应式只改变量值，不改样式规则：
@media (min-width: 768px) { :root { --space-unit: 6; } } - 慎用
calc(var(--space-unit) * 1.2)：Safari 15.4 前支持不稳定，建议直接设新值
真正难的不是“怎么写变量”，而是确保每个组件都落在同一套作用域规则里——:root定义默认值，组件选择器重定义局部值，媒体查询只更新变量不碰样式，JS 修改时带单位、选对节点、节流并等 DOM 挂载完成。
