css变量不能用于@media条件，需用字面量断点配合:root重设；clamp()三参数单位须一致；gap变量必须带单位且定义在容器上；gap与padding应分设变量。
CSS变量本身不能直接参与@media条件判断，但能通过“字面量断点 + 变量重设”实现统一管理——关键不是让变量驱动媒体查询，而是让媒体查询驱动变量更新。
为什么@media (min-width: var(--sm))会静默失效
浏览器规范明确禁止在媒体查询条件中使用var()。写成这样，整条@media规则会被忽略，不报错、不警告，样式直接丢失。这不是兼容性问题，是语法层面被拒收。
- 错误示例：
@media (min-width: var(--sm)) { .card { gap: var(--gap); } } - 正确思路：用
768px这类字面量写断点，再在匹配块里对:root重设变量值 - 初始值必须定义在
:root顶层，否则未命中任何断点时var(--gap)会 fallback 到unset或继承值（比如0）
如何用:root + @media分层控制间隙变量
把间隙逻辑收口到:root，组件里只引用，不重复写断点。这样改一个地方，所有用var(--gap)的地方自动响应。
- 基础值声明：
:root { --gap: 8px; } - 断点内重设：
@media (min-width: 768px) { :root { --gap: 16px; } } - 大屏再调：
@media (min-width: 1440px) { :root { --gap: 24px; } } - 组件中直接用：
.grid { gap: var(--gap); }，无需额外@media
用clamp()做流体缩放时单位必须一致
clamp()是唯一免JS实现连续缩放的方案，但它对单位极其敏感：三个参数单位必须完全相同，混用px和rem或vw会导致部分浏览器（尤其是旧版 Safari）解析失败，gap直接退成初始值或0。
- 安全写法：
--gap: clamp(8px, 2.5vw, 24px); - 危险写法：
--gap: clamp(0.5rem, 4vw, 1.5rem);（rem与vw混用） - 若需兼容 iOS 14 或 Android WebView，加降级：
--gap: 8px; --gap: clamp(8px, 2.5vw, 24px); - 别用
%或vh替代vw——前者相对父容器，后者随滚动跳变，都不稳定
gap变量必须带单位，且定义位置有讲究
gap属性不接受无单位数值，var(--gap)要生效，--gap的值本身就得含单位（如16px），不能是纯数字16或字符串"16px"。而且变量必须定义在 Flex/Grid 容器上，不继承。
- 推荐写法：
.grid { --gap: 16px; gap: var(--gap); } - 错误写法：
:root { --gap: 16; } .grid { gap: var(--gap); }（缺单位，静默失效） - 嵌套容器需各自设变量：
.grid-inner { --gap: 8px; gap: var(--gap); }，外层--gap不会影响内层 - 别用已废弃的
grid-gap，只用gap；Safari 14.1+ 才完整支持变量绑定
真正容易被忽略的是：gap 和 padding 的语义不同，却常被塞进同一个变量。缩放时，布局间隙该动，内容呼吸区未必该动——混用会让小屏文字贴边、大屏内容被撑开。分开定义--gap-unit和--pad-unit，节奏才可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
