display 属性不支持 CSS 变量，因其为非可计算属性，只能接受字面量值；可用 visibility + opacity 组合实现视觉显隐，并配合 data-属性驱动类名或框架响应式数据控制状态。
display 属性根本不能接 CSS 变量
直接写 display: var(--nav-display) 是无效的——浏览器会静默丢弃整条声明，不报错也不生效。因为 display 是非可计算属性，只接受字面量值（如 flex、none、grid），不参与自定义属性的运行时计算。
哪怕你把它塞进媒体查询里：@media (min-width: var(--breakpoint-md))，Safari 15.3 及更早版本会直接忽略这条规则；即使新版支持，display 那一行依然不会动。
-
getComputedStyle(el).display只能读到最终计算值（比如"none"），无法反推变量来源 - 用变量控制
display的想法，从底层机制上就走不通
真正可用的变量方案：visibility + opacity
这两个属性完全支持 CSS 变量，且能实现视觉上的“隐藏/显示”切换：
.nav-menu {
visibility: var(--visibility-nav, hidden);
opacity: var(--opacity-nav, 0);
transition: opacity 0.2s ease;
}
在断点中重设变量即可：
立即学习“前端免费学习笔记（深入）”；
@media (min-width: 768px) {
:root {
--visibility-nav: visible;
--opacity-nav: 1;
}
}
-
visibility: hidden的元素仍占布局空间，小屏下若需腾出垂直空间，此方案不合适 - 过渡动画只能作用于
opacity；visibility不可动画，但它是“开关”，避免闪烁 - 别忘了搭配
pointer-events: none/pointer-events: auto控制交互响应
推荐落地做法：data-属性驱动类名
把“是否显示”这个状态语义化地落到 HTML 上，再用属性选择器联动样式：
@media (max-width: 768px) {
[data-nav-state="open"] .nav-menu {
display: flex;
}
}
JS 切换只需一行：
document.body.setAttribute('data-nav-state', 'open');
- 避免直接操作
el.style.display，防止内联样式优先级干扰后续 CSS 规则 - 在 Vue/React 中别手动改 DOM 属性——必须通过响应式数据驱动，否则和框架 diff 冲突
-
display: none的元素无法获得焦点，做可访问性时必须同步控制aria-expanded和键盘焦点流
Tailwind 用户注意：hidden 类不可动画
Tailwind 的 hidden 就是 display: none，它本身无法参与任何 CSS 过渡。想加展开动画，得绕开它：
- 用
max-h-0 overflow-hidden+max-h-96模拟高度收放 - 配合
opacity-0→opacity-100和transition-opacity - 确保汉堡按钮和菜单在同一 DOM 层级，避免父容器
overflow-hidden裁剪下拉内容
变量在这里没用武之地——Tailwind 的断点类（如 md:flex）本质是预编译的媒体查询，不接受运行时变量注入。
