calc()本身不动态，真正的自适应依赖变量驱动；变量应绑定到具体容器而非:root全局作用域；混用单位需谨慎，flex下calc()宽度常被忽略，须用flex-basis控制。
为什么直接写 calc(100% - 20px) 不算“自适应”
它只是静态减法，不随主题、设备或用户行为变化。真正需要的是宽度能响应暗色模式切换、侧边栏收起/展开、多语言界面缩放等运行时状态——这些都得靠变量驱动。calc()本身不动态，它只计算一次；动态性全在var(--sidebar-width)的值怎么变。
变量该定义在哪？别塞进 :root
全局变量容易跨组件污染，尤其当多个侧边栏共存（比如嵌套仪表盘）时，一个JS脚本改了--sidebar-width，所有侧边栏一起抖动。更稳妥的做法是把变量绑定到具体容器上：
- 给侧边栏父容器加类
.sidebar-container，再写.sidebar-container { --sidebar-width: 240px; } - JS 更新时用
el.style.setProperty('--sidebar-width', '280px')，作用域天然受限 - 媒体查询里切变量也更安全：
@media (max-width: 768px) { .sidebar-container { --sidebar-width: 0; } }
calc() 里混单位的三个高危场景
不是所有单位都能放心相加减，尤其在移动端和旧浏览器里：
-
calc(100% - 1em)：字体加载前1em取默认值（通常是16px），布局可能跳变；换成calc(100% - 16px)更稳 -
calc(100vw - var(--sidebar-width))中，若--sidebar-width是20ch，而当前字体非等宽，ch值浮动，仅适合文本对齐类微调，别用在主干布局 -
calc(100vh - var(--header-h) - env(safe-area-inset-bottom))：iOS Safari 15.4+ 才稳定支持env()，旧版会整条声明失效，得用@supports降级
Flex 布局下，calc() 宽度大概率被忽略
如果你给侧边栏设了display: flex的父容器，又在里面写width: calc(100% - 240px)，浏览器根本不会理它——因为 Flex 子项的主轴尺寸由flex-basis主导，width被覆盖。
- 正确做法：侧边栏用
flex: 0 0 var(--sidebar-width)，主内容区用flex: 1 - 必须加
min-width: 0到主内容区，否则长URL或<pre class="brush:php;toolbar:false;"></pre>会撑破布局 - 收起侧边栏时，别只设
width: 0，要改flex-basis: 0，配合overflow: hidden和transition: flex-basis 0.3s
最常被忽略的其实是变量更新时机：JS 设置setProperty后，DOM 渲染未必立刻完成，如果紧接着读offsetWidth，可能拿到旧值。需要在requestAnimationFrame回调里取尺寸，或者监听transitionend事件确认动画结束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
