css变量不能用于@media查询条件，因规范禁止；断点需用字面量如768px；变量须在@media内通过:root重设才响应屏幕变化；margin塌陷与变量无关，仍遵循原有布局规则。
为什么不能直接在 @media 里用 var(--breakpoint-sm) 写断点
浏览器会静默丢弃整条 @media 规则，因为 CSS 规范禁止变量参与媒体查询条件计算。你写的 @media (min-width: var(--breakpoint-sm)) 看似合理，实际根本不会生效——它不是“值没传对”，而是语法不被解析。
真正能用的只有字面量：比如 @media (min-width: 768px)。变量只能出现在声明块内部，不能出现在查询条件里。
- 想让断点可维护？把
--breakpoint-sm: 768px定义在:root，再手动抄进每个@media，别指望自动代入 - 漏写单位（如写成
--breakpoint-sm: 768）会导致后续calc()计算失败，但错误不报，只渲染异常 - 构建工具（如 PostCSS）可做变量替换，但纯 CSS 场景下必须人工同步
:root 里定义间距变量后，为什么小屏和大屏还是同一个值
因为只定义、没覆盖。CSS 变量本身不响应，:root { --space-md: 16px; } 只是设了个初始值，它不会随屏幕变——得靠 @media 块显式重设。
常见错误是以为“定义一次，全局响应”，结果所有尺寸都用 16px。
- 移动端优先：先在
:root设小值，如--space-md: 12px - 再在
@media (min-width: 768px)里写:root { --space-md: 16px; } - 桌面端继续加一层：
@media (min-width: 1200px) { :root { --space-md: 20px; } } - 组件中统一用
margin: var(--space-md)，别在每个选择器里重复写媒体查询
用 clamp() 还是用 @media 切换离散值
看设计需求。如果要求“小屏 8px、中屏 16px、大屏 24px”三档精确控制，clamp() 的连续插值反而失控；如果接受“从 8px 平滑涨到 24px”，且中间无明确断点，则 clamp(8px, 4vw, 24px) 更简洁。
-
clamp()参数单位必须一致：不能混用rem和vw，部分浏览器（尤其老 Safari）会降级为第一个值 -
@media方式更可控，调试时 DevTools 能清楚看到变量在哪一层被改写 - 两者不互斥：可用
clamp()做兜底，再用@media在关键断点强制锁定，比如@media (min-width: 1440px) { :root { --gap: 24px; } } - 注意：IE 完全不支持
clamp()和 CSS 变量，需预处理器 fallback
为什么改了 --space-md，兄弟元素的 margin 还是对不齐
因为 margin 塌陷（collapsing margins）照常发生——变量只是替换了数值，不改变 CSS 渲染机制本身。两个相邻块级元素的垂直外边距会合并，跟是不是用 var(--space-md) 无关。
- 这不是 bug，是规范行为。即使写死
margin-bottom: 16px，塌陷也存在 - 解决方向不是“换变量”，而是改布局模型：用
gap替代margin（适用于 Flex/Grid）、给父容器加overflow: hidden阻断塌陷、或用padding代替margin - 负 margin + 变量更要小心：比如
margin-top: calc(var(--space-md) * -1)，若--space-md在某断点变大，负值可能把元素拉出视口且不可滚动
复杂点在于：变量只是“值的容器”，它不携带语义、不触发重排、也不绕过 CSS 布局规则。你控制的从来不是“响应式”，而是“在哪改值、改给谁看、改后是否还符合渲染逻辑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
