因为display属性只接受字面量关键字，不支持CSS变量值；可行方案是用data属性+媒体查询控制类名显隐，或改用visibility/opacity等变量友好型属性。
为什么不能直接用 display 变量控制断点显隐
很多人想写 @media (min-width: var(--breakpoint-md)) { .sidebar { display: var(--display-sidebar); } }，结果发现完全不生效——不是语法错，是浏览器根本不会解析 display 的值来自变量。CSS 的 display 属性只接受字面量关键字（block、none、grid 等），不支持运行时取变量值。变量能参与的，仅限于可计算属性（如 color、gap、font-size），而 display 不在其中。
display 类名 + CSS 变量控制显隐的可行路径
真正可落地的做法，是把“是否显示”这个逻辑从属性值移到类名上，再用变量辅助控制类名的启用条件：
- 定义语义化类名，比如
.show-on-md、.hide-on-lg，每个类内部写死display: block或display: none - 在
:root中定义开关变量，如--show-sidebar: 1（1 表示开启，0 表示关闭） - 用媒体查询配合属性选择器，动态切换类名的生效状态：
@media (min-width: var(--breakpoint-md)) { [data-show-sidebar="1"] .sidebar { display: block; } } - HTML 中根据逻辑设置
data-show-sidebar属性：，JS 可随时更新它
更轻量的替代方案：用 visibility + opacity 配合变量
如果目标只是“视觉上隐藏/显示”，而非彻底移出文档流，visibility 和 opacity 是变量友好型属性：
-
visibility支持变量值：.sidebar { visibility: var(--visibility-sidebar, hidden); } - 搭配
opacity实现淡入淡出：.sidebar { opacity: var(--opacity-sidebar, 0); transition: opacity 0.2s; } - 在不同断点下重设变量值：
@media (min-width: var(--breakpoint-md)) { :root { --visibility-sidebar: visible; --opacity-sidebar: 1; } } - 注意：这不会释放空间，
visibility: hidden的元素仍占布局位置
容易被忽略的兼容性陷阱
即使走变量 + visibility 路线，仍有三个实际卡点：
立即学习“前端免费学习笔记（深入）”；
- Safari 15.3 及更早版本不支持在媒体查询中使用
var(--breakpoint-md)，整条规则会被静默丢弃——必须双写：@media (min-width: 768px) { ... }+@media (min-width: var(--breakpoint-md)) { ... } -
display值无法通过getComputedStyle读取变量计算结果，JS 想判断当前是否显示，只能查computedStyle.display === 'none'，不能依赖变量原始值 - 用
data-属性驱动类行为时，别在 Vue/React 中直接操作dataset，优先用响应式绑定（如 Vue 的:class、React 的className动态拼接）
