calc() 在媒体查询中语法不合法，浏览器直接忽略整条 @media 规则；它仅允许出现在 css 属性值中，替代方案包括 js 动态插入、预处理器计算或 css 容器查询。
calc() 在媒体查询中根本不能用——它不是“失效”，而是语法不合法。CSS 规范明确禁止在 @media 条件表达式里使用 calc()，所有浏览器都会直接忽略整条规则。
媒体查询中写 calc() 会怎样
比如这样写：
/* 完全无效，整条 @media 被丢弃 */
@media (min-width: calc(500px + 1rem)) {
.box { width: 100%; }
}
结果不是“计算错”，而是浏览器压根不解析这条 @media，后续样式不会生效。DevTools 里也看不到该规则，Network 或 Styles 面板都找不到痕迹。
常见误判是以为“加了空格就 OK”或“单位对了就能跑”，但问题不在空格或单位——是语法层级不允许。
-
calc()只能出现在 CSS 属性值中（如width、margin），不能出现在选择器、@media、@container或@supports的条件部分 - 哪怕写成
@media (min-width: calc(500px))，只要里面带calc()，整个媒体查询块就被跳过 - 某些构建工具（如旧版 PostCSS 插件）可能提前报错或静默移除，但根源仍是规范限制
想动态控制断点，有什么替代写法
如果目标是“根据某个基础值算出断点”，得把计算逻辑移到 JS 或预处理器里，而不是塞进媒体查询。
- 用 CSS 自定义属性 +
@container（需容器查询支持）：把calc()放在容器元素的style或 class 里，再用container-type: inline-size配合@container (min-width: 300px) - 在 JS 中动态插入媒体查询样式表：
matchMedia(`(min-width: ${base + 16}px)`)，然后用CSSStyleSheet.insertRule() - Less/Sass 中提前计算：
$breakpoint: 500px + 1rem; @media (min-width: $breakpoint) { ... }—— 注意：这是预处理器运算，输出的是静态值，不是运行时calc()
为什么文档里查不到这个限制
因为规范写得非常隐晦：CSS Conditional Rules Level 4 明确说媒体查询条件必须是“<media-condition></media-condition>”，而该类型定义中不包含函数调用。它只接受数字、单位、比较符、括号和布尔逻辑，calc() 属于“声明值域”，不在条件语法树内。
开发者容易混淆，是因为 clamp() 和 min()/max() 在媒体查询里也一样被禁——它们同属“函数型值”，不是“条件型值”。唯一能用的动态函数是 env()（仅限部分环境变量，如 safe-area-inset-top），但它也不是计算函数。
真正容易被忽略的点是：错误不是发生在样式渲染阶段，而是在 CSS 解析阶段就被整块抛弃；你检查空格、单位、括号都没用，得先确认自己没把它放在语法禁区里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
