calc()在移动端失效主因是加减号缺空格、变量无单位或父容器宽度为auto；正确写法需确保运算符两侧有空格、0带单位、100%替换为100vw并验证父级width。
calc(100% - 20px) 在移动端不生效，大概率不是兼容性问题，而是浏览器直接跳过了整条 CSS 声明——因为加减号缺空格，语法非法。
加减号两侧必须有空格，否则整条规则被静默丢弃
移动端 WebKit 内核（如 Safari、iOS WebView、部分安卓浏览器）对 calc() 的解析极其严格：只要 + 或 - 任一侧没空格，就认定为非法 token，整条声明（比如 width、left、padding）直接不应用，DevTools 里都看不到它。
-
calc(100% - 20px)✅ 正确：减号前后各一个英文空格 -
calc(100%-20px)❌ 失效：无空格，被忽略 -
calc(100% -20px)❌ 失效：减号后没空格，“-20px”被当作非法单位 -
calc(-50% + 10px)✅ 正确：负号属于数值一部分，+前后仍需空格
移动端特别容易踩的坑：预处理器 + 空格 + 单位三重叠加
在 SCSS/Less 中写 calc(100% - $gap)，即使你手敲了空格，也大概率失效——因为预处理器会提前运算或删空格。
- Sass 必须用插值：
calc(100% - #{$gap})，且$gap必须含单位（如$gap: 20px） - Less 推荐转义：
calc(~"100% - @{gap}")，避免它把-当作减法运算符 - 如果变量是
$gap: 20（无单位），插值后变成calc(100% - 20)，依然非法 - 某些构建工具（如 webpack css-loader）还会二次转义
~""，导致小程序或低端 WebView 里失效
100% 的基准在移动端更不可靠
移动端视口缩放、横竖屏切换、软键盘弹出都会影响布局链路，100% 的父容器宽度极易变成 auto 或未定义值。
-
calc(100% - 20px)中的100%指的是**父元素的width计算值**，不是 viewport 宽度 - 常见失效场景：Vue/React 组件嵌套中，某个中间父容器是
display: inline或float未清除，导致其width为auto→100%=0→ 整个计算结果为负值，被浏览器丢弃 - 更稳的写法：
calc(100vw - 20px)（用视口单位避开父级依赖），但需确认是否符合业务逻辑（比如是否要响应 sidebar 折叠）
0 必须带单位，移动端解析器更零容忍
哪怕只是占位，0 在 calc() 里也不能裸写——移动端内核对类型推导更激进，0 会被直接判为无效值。
-
calc(0px + 100vw)✅ 可用 -
calc(0 + 100vw)❌ 移动端大概率失效，整条声明消失 -
calc(0% + 100vw)✅ 允许，但注意%和vw混合在旧版 iOS Safari 中可能触发回退 - 自定义属性同理：
--gap: 0px才安全，--gap: 0就是埋雷
真正难调试的永远不是单点问题：你改对了空格，却漏了变量单位；补全了单位，父容器又没设宽；父容器设了宽，却被上层 transform 或 contain 截断了尺寸继承。移动端看一眼 DevTools 的 computed 栏，先搜 calc 是否出现在最终样式里，再往上逐层查空格、单位、父级 width —— 三者断一，calc() 就是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
