display属性不支持CSS变量值，因其为非可计算属性，仅接受字面量关键字（如none、flex）；替代方案是用data-属性驱动类名显隐，或以visibility/opacity变量实现视觉切换。
display 属性不支持 CSS 变量值，所以「用 var(--display-nav) 控制导航栏显隐」这条路走不通——浏览器直接忽略该声明，不会报错，但也不会生效。
为什么 display 不能接 CSS 变量
-
display是非可计算属性，只接受字面量关键字（如flex、none、grid），不参与 CSS 自定义属性的运行时计算 - 即使写成
@media (min-width: var(--breakpoint-md)) { .nav-menu { display: var(--display-nav); } }，整条规则也会被静默丢弃（Safari 15.3 及更早版本甚至不支持var()出现在媒体查询中） - JS 通过
getComputedStyle(el).display只能读到最终计算值（如"none"），无法反推变量原始值
替代方案：用 data- 属性 + 类名驱动显示逻辑
真正可落地、可维护、兼容性好的做法是把“是否显示”这个决策从属性值移到 HTML 结构上：
- 在根元素或导航容器上设置语义化
data-属性，如data-nav-state="closed" - 用媒体查询 + 属性选择器控制类名生效范围：
@media (max-width: 768px) { [data-nav-state="open"] .nav-menu { display: flex; } } - JS 切换状态只需改属性：
document.body.setAttribute('data-nav-state', 'open') - 避免直接操作
style.display，防止内联样式优先级干扰
更轻量的选择：用 visibility + opacity 配合变量
如果目标只是视觉切换（不要求彻底移出文档流），这两个属性完全支持变量：
.nav-menu { visibility: var(--visibility-nav, hidden); opacity: var(--opacity-nav, 0); transition: opacity 0.2s; }- 在断点中重设变量：
@media (min-width: 768px) { :root { --visibility-nav: visible; --opacity-nav: 1; } } - 注意：
visibility: hidden的元素仍占布局空间，小屏下若需节省垂直空间，此方案不适用
容易被忽略的三个实际卡点
- Safari 15.3 及更早版本不支持
var(--breakpoint-md)出现在媒体查询中，必须双写：@media (min-width: 768px) { ... }和@media (min-width: var(--breakpoint-md)) { ... } - 使用
data-属性方案时，别在 Vue/React 中直接操作 DOM 属性——应通过响应式数据驱动，否则会和框架的 diff 机制冲突 -
display: none的元素无法获得焦点，做可访问性（a11y）时，必须配合aria-expanded和键盘焦点管理，不能只靠变量控制显隐
事情说清了就结束。
立即学习“前端免费学习笔记（深入）”；
