css媒体查询中不能使用css变量定义断点，因var()属运行时求值，语法校验阶段即被拒绝；正确做法是在@media中用字面量断点，再通过:root或具体选择器重设变量。
支持，但必须写在 :root 或具体选择器内，且不能依赖变量驱动断点本身。
为什么 @media (min-width: var(--sm)) 会静默失效
浏览器在解析 CSS 时，媒体查询条件必须是字面量（如 768px），var(--sm) 属于运行时求值，语法校验阶段就被拒绝。整条 @media 规则被跳过，DevTools 中显示为灰色，控制台无任何提示。
-
@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 中正确重置 CSS 变量
唯一合法方式：用字面量写断点，在匹配的块中对 :root 或目标选择器显式赋值。
- 初始值必须定义在
:root顶层，否则未匹配媒体查询时变量为unset - 重设必须带选择器，
@media (min-width: 768px) { --gap: 1rem; }是无效语法 - 要全局生效，写成
@media (min-width: 768px) { :root { --gap: 1rem; } } - 只影响局部组件，就针对该组件选择器重设：
@media (prefers-color-scheme: dark) { .card { --text-color: #f0f0f0; } }
重置后样式没更新？检查这三处
变量值变了，但视觉没变，通常不是变量问题，而是引用链或作用域出错。
- 元素样式没用
var(--gap)，比如写了padding: 1rem而非padding: var(--gap) - 变量定义在
.card内部，而@media却去改:root—— 作用域不重叠 - 某处用了
!important（如color: #000 !important;），压制了color: var(--text-color); - 图片 URL 类变量不能设默认值：
:root { --img-url: "fallback.jpg"; }会导致 fallback 图立即加载；应只在对应@media块中声明
真正容易被忽略的是：变量重设不会触发重绘，已渲染元素需 DOM 变动或 class 切换才能刷新样式；另外，clamp() 中混用单位（如 1rem 和 24px）在旧版 Safari 可能直接计算失败，统一单位才稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
