CSS变量不能直接用于@media条件，因媒体特性值必须为字面量，var()在解析时未求值而被忽略；可通过:root重设、clamp()/calc()、构建注入或JS动态控制实现断点复用。
CSS变量不能直接用于@media条件，这是CSS规范明确禁止的——浏览器解析时会跳过整条规则，且不报错。
为什么 @media (max-width: var(--breakpoint)) 会失效
CSS媒体查询的语法要求媒体特性值必须是字面量（如768px），不能是运行时计算值。var(--breakpoint)属于CSS自定义属性引用，在解析@media时还未求值，因此被当作非法语法忽略。
- 浏览器控制台不会报错，但开发者工具里该
@media规则会显示为灰色、禁用状态 - 哪怕
--breakpoint已在:root中定义为768px，也无法穿透到媒体查询条件中 - 预处理器（如Sass）能实现类似效果，但那是编译期替换，不是原生CSS行为
如何安全地复用断点值：声明 + 重设模式
最兼容、最可控的方式是把断点值定义为变量，再在每个媒体查询块内显式重设对应的选择器作用域变量——不是“覆盖”，而是“在新上下文里重新声明”。
- 先在
:root定义基础值：:root { --bp-sm: 480px; --bp-md: 768px; } - 在媒体查询中对
:root重赋值：@media (max-width: 768px) { :root { --gap: 8px; --font-size-base: 14px; } } - 注意：
:root不可省略，写成@media (...) { --gap: 8px; }完全无效 - 所有用到这些变量的样式，必须写在该媒体查询内部，或确保继承链完整（比如
body下子元素读取var(--gap)）
更灵活的替代：用clamp()和calc()绕过变量限制
当目标是响应式缩放（比如字号、间距随视口变化），clamp()比媒体查询+变量组合更简洁，且天然支持流体逻辑。
立即学习“前端免费学习笔记（深入）”；
- 例如：
font-size: clamp(1rem, 2.5vw, 1.5rem);—— 小屏用1rem，大屏封顶1.5rem，中间线性过渡 - 配合
calc()可引入变量做比例调节：--scale: 0.8; font-size: calc(1rem * var(--scale));，但需确保--scale本身已在对应媒体查询中重设 -
clamp()不依赖媒体查询，IE11不支持；若需兼容IE，仍得退回传统@media+ 固定值方案
构建时注入 or 运行时JS控制：适合动态断点场景
如果断点需从配置文件、用户偏好或设备能力中动态获取（比如根据DPR或折叠屏状态），纯CSS无法胜任，必须借助外部机制。
- 构建工具（Vite/Vue CLI等）可在CSS编译前用插件替换
var(--breakpoint)为实际像素值 - JS监听
resize或matchMedia，然后document.documentElement.style.setProperty('--breakpoint', '...')，但注意：JS更新变量不会触发媒体查询重计算，只能配合classList切换或style内联覆盖 - 真正需要“媒体查询响应JS变量”的场景，往往说明设计已超出CSS职责边界，应考虑用容器查询（
@container）或组件级响应逻辑替代
最容易被忽略的一点：很多人试图让CSS变量“驱动”媒体查询逻辑，其实混淆了声明式样式与响应式控制的分层——变量负责状态传递，媒体查询负责环境判断，两者必须解耦使用，强行缝合只会增加维护成本和兼容风险。
