css变量不能用于@media条件，因规范限制其仅接受字面量；断点应声明为带单位的:root变量，并通过重设变量或控制组件内样式实现响应；clamp()、minmax()等函数中所有变量必须含单位，且需配合子元素收敛措施确保布局稳定。
为什么不能直接在 @media 里用 var(--breakpoint)
浏览器根本不解析 CSS 变量在媒体查询条件中的值，写成 @media (min-width: var(--sm)) 会直接忽略整条规则。这不是兼容性问题，而是规范限制——@media 条件只接受字面量，不参与 CSS 自定义属性的计算流程。
真正可行的路径是：把断点值声明为 :root 变量（如 --bp-sm: 480px），然后在每个媒体查询块内显式重设它对应的实际值；或者更实用的做法——别让变量控制断点本身，而是让它控制组件内部响应行为，比如 --font-size-base、--gap 这类样式参数。
clamp() + calc() 是流体排版的核心组合
想让字体或间距随视口平滑变化，必须放弃“断点跳变”，改用 clamp() 内置的区间约束能力。但直接硬编码 clamp(1rem, 1.2rem + 2vw, 1.5rem) 仍难维护，所以要把系数抽成变量：
-
--min-font: 1rem、--max-font: 1.5rem、--slope: 2必须带单位（1rem而非1） - 写法必须是
clamp(var(--min-font), calc(var(--min-font) + var(--slope) * 1vw), var(--max-font)) - 注意单位兼容性：
1rem + 2vw合法，1rem + 2px在部分旧浏览器中会静默失败
Grid 布局中 minmax() 的变量必须自带单位
minmax(var(--grid-min-item), 1fr) 看似简洁，但如果 --grid-min-item 定义成 280（无单位），整个表达式会失效，列数卡死在初始状态，且无任何报错提示。
正确做法是：
- 在
:root中定义--grid-min-item: 280px，不是280 - 所有参与
minmax()、calc()、clamp()的变量值都必须含单位 - 媒体查询中不重写
grid-template-columns，而是覆盖变量：@media (max-width: 480px) { :root { --grid-min-item: 100%; } }
子元素不收敛，再好的变量也白搭
Grid 的 auto-fit 行为依赖子项不撑破轨道。哪怕你把 --grid-min-item 改成 200px，只要卡片里有图片没加 max-width: 100%，或文字块用了 white-space: nowrap，浏览器就会按内容固有宽度计算列宽，导致自动填充退化为单列。
关键收敛措施包括：
- 所有图片加
max-width: 100%; height: auto; - 含
flex的子容器加min-width: 0（防止默认min-width: auto劫持） - 长文本容器加
overflow-wrap: break-word; min-width: 0; - 避免父级设置
white-space: nowrap或未设width: 100%
变量只是把可变参数拎出来，真正的响应逻辑藏在这些收敛细节里——漏掉任意一条，布局就可能在某个视口下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
