如何使用CSS变量来调整导航栏的折叠宽度？

本文共计1029个文字，预计阅读时间需要5分钟。

浏览器不支持在 `flex-basis 中直接写 `var(--nav-width)`，即使用变量也无法动态地插入变量值。这不是您写错了，而是CSS规范的限制——在简写属性如 `flex` 和 `flex-basis` 的值解析时，不支持动态插入变量。

实操建议：

• 侧边栏设 width: var(--nav-width, 240px); flex: 0 0 auto;，主内容区设 flex: 1;
• --nav-width 必须定义带单位：:root { --nav-width: 240px; }，写成 240 或 240rem（单位错）都会失效
• 如果要用 calc() 做微调，fallback 不可少：width: calc(var(--nav-width, 240px) - 20px);
• Safari 旧版本可能不响应变量更新，JS 修改后加一句 getComputedStyle(document.documentElement).transform; 强制重排

收缩时宽度归零但保持可访问性，别用 display: none

直接设 width: 0 或 display: none 会让导航项退出布局流，键盘焦点丢失、屏幕阅读器跳过，动画也容易卡顿。