不能在@media条件中使用var(--breakpoint)，因css规范禁止变量参与媒体查询计算，浏览器会静默忽略整条规则；正确做法是将断点值硬编码在@media中，再通过:root内重设css变量来驱动样式响应。
直接用 :root 定义变量，在每个 @media 块里只改值，不重复写选择器和整套声明——这是最轻量、最可靠、浏览器原生支持的解法。
为什么不能在 @media 条件里用 var(--breakpoint)
写成 @media (min-width: var(--md)) 会直接失效，浏览器忽略整条规则。CSS 规范明确禁止变量参与媒体查询条件计算。断点值必须硬写进 @media，但后续所有样式变化都可以交给变量驱动。
- 变量只在声明块内生效，不能“穿透”到
@media的括号里 - 想动态控制断点逻辑，得靠 JS 监听
matchMedia或构建时替换（如 PostCSS） - 纯 CSS 方案里，
:root中定义--breakpoint-md: 768px仅作语义标记，实际仍要写@media (min-width: 768px)
:root 变量必须在默认状态就定义好
如果只在 @media (min-width: 768px) 里定义 --spacing-unit，小屏下 var(--spacing-unit) 就是未定义值，calc() 会中断，样式直接断裂。
- 基础值必须写在顶层
:root，比如--spacing-unit: 4px - 每个
@media块只负责覆盖——:root { --spacing-unit: 8px; } - 避免在组件选择器里定义同名变量，否则媒体查询改的
:root值会被局部作用域屏蔽
哪些值适合抽成响应式变量
优先抽那些随屏幕尺寸系统性缩放的值，不是所有属性都适合。
- 字号、行高、间距（
--font-size-base、--space-md）——变化规律强，复用率高 - 容器最大宽、栅格列数控制类（
--max-width-content、--grid-cols）——结构级变量 - 别抽
display、position、background-image这类开关式或装饰性属性——它们不是渐进变化，硬编码反而更清晰 - 单位必须显式写出：
--size: 16px✅，--size: 16❌（calc(100% - var(--size))会失败）
媒体查询里改了变量，但样式没变？检查三处
变量改了 ≠ 样式自动更新，中间缺一环就白忙。
- 对应的选择器里没用
var(--xxx)引用，比如写了font-size: 16px而不是font-size: var(--font-size-base) - 变量被
!important硬覆盖，导致后续媒体查询无法重置 -
@media块里修改的是局部变量（如.card { --gap: 1rem; }），但你期望它影响全局:root下的规则
真正难的不是怎么写，而是让团队所有人养成「变量先行」的习惯：新增一个 padding，先查有没有现成 --space-xx；写新组件，第一行就声明它依赖哪些变量。否则再好的机制，也会在三个月后被新 PR 撕开一道口子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
