CSS变量不能用于媒体查询，因规范要求媒体特性值必须为字面量，var()属运行时求值，语法解析阶段即被拒绝；唯一合法复用方式是在@media中重设:root变量。
不能。
CSS变量（var(--name)）根本无法作为媒体查询的判断条件，浏览器会直接跳过整条 @media 规则，不报错、不警告、DevTools 中显示为灰色禁用状态——这不是兼容性问题，是 CSS 规范在语法解析阶段就拒绝的行为。
为什么 @media (min-width: var(--sm)) 静默失效
媒体查询匹配发生在样式计算之前，而 var() 的求值依赖继承、层叠和作用域解析，属于运行时行为。规范强制要求媒体特性值必须是字面量（如 768px），var(--sm) 在语法校验时就被判定非法。
-
@media (max-width: var(--bp-md, 768px))同样无效 —— fallback 不参与语法校验 -
@media (min-width: calc(var(--sm) * 1px))也非法 ——calc()内含var()仍属运行时表达式 -
@custom-media --md (min-width: var(--sm))同样被拒 —— 自定义媒体查询定义本身也不接受变量
真正能复用断点值的合法写法
变量不能驱动媒体查询，但媒体查询可以重设变量。唯一原生、无需构建工具的路径是：在每个 @media 块中显式对 :root（或具体选择器）重新赋值。
立即学习“前端免费学习笔记（深入）”；
- 顶层必须先声明：
:root { --gap: 1rem; --font-size-base: 1rem; } - 然后在媒体查询中覆盖：
@media (max-width: 768px) { :root { --gap: 0.75rem; --font-size-base: 0.875rem; } } - 省略
:root选择器（如写成@media () { --gap: 8px; }）是无效语法 - 所有使用
var(--gap)的样式，需确保继承链完整（例如写在body或其后代上）
组件级变量不会从 :root 继承新值
你在 .card 里定义了 --text-color，又在 @media (prefers-color-scheme: dark) 中改 :root 的同名变量，.card 内的 var(--text-color) 依然读不到——因为它的作用域是 .card 自身，不是 :root。
- 要生效，得在对应选择器内重设：
@media (dark) { .card { --text-color: #f0f0f0; } } -
--color: unset会让继承中断，子元素拿不到任何值，只能靠var(--color, #000)fallback - 媒体查询中重设的变量，只影响其内部及后代；已渲染元素不会自动刷新样式，需触发重绘（如 class 切换、DOM 变动）
别指望 JS 修改变量能触发媒体查询重匹配
document.documentElement.style.setProperty('--bp-md', '480px') 不会让 @media (max-width: 768px) 突然变成 @media (max-width: 480px)——媒体查询只响应视口尺寸变化，不响应 CSS 变量变更。
- 如果断点需动态生成（如根据 DPR、折叠屏状态），纯 CSS 无解，必须用 JS +
matchMedia()或构建时注入 -
clamp()和calc()可替代部分媒体查询场景，但它们本身也不接受var()作为参数，除非变量已在当前上下文中被重设 - 最常被忽略的细节：变量只是“状态容器”，不是“条件生成器”；响应逻辑仍得由媒体查询、容器查询或 JS 监听承担
