calc()在移动端“不生效”主因是加减号缺空格致整条声明被静默丢弃，需确保运算符两侧有空格、变量正确插值且带单位、0必须带单位、旧版安卓需fallback降级。
calc() 在部分移动端浏览器上“无法识别”，通常不是它真不支持，而是整条 CSS 声明被解析器直接跳过——你写的样式根本没进计算流程，DevTools 里都看不到它。
加减号两侧必须有空格，否则整条声明静默丢弃
移动端 WebKit 内核（Safari、iOS WebView、多数安卓 WebView）对 calc() 的语法校验极严：只要 + 或 - 任一侧缺英文空格，就判定为非法 token，整条规则（比如 width、height）被静默忽略。
-
calc(100% - 20px)✅ 正确：减号前后各一个空格 -
calc(100%-20px)❌ 失效：无空格，“100%-20px”被当做一个非法单位名 -
calc(100% -20px)❌ 失效：减号后没空格，“-20px”被识别为带负号的单位，不合法 -
calc(-50% + 10px)✅ 正确：负号属于数值本身，+前后仍需空格
Sass/Less 变量必须插值或转义，否则预处理器提前“算错”
Sass 和 Less 在构建阶段就把 calc() 当作自己语法处理，不显式干预就会把变量代入后错误简化，输出无效 CSS。
- Sass 必须用
#{$gap}插值，且$gap值必须含单位（如$gap: 20px），写成calc(100% - #{$gap}) - Less 推荐用
calc(~"100% - @{gap}")转义，避免它把-当作减法运算符 - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)—— 编译后仍是字面量，浏览器无法识别 - 如果变量是纯数字（如
$gap: 20），插值后变成calc(100% - 20)，单位缺失，依然非法
0 必须带单位，移动端解析器比桌面端更零容忍
0 在 calc() 中不是数字，而是“无类型占位符”。移动端内核不会尝试推断，直接判为无效值，整条声明消失。
-
calc(0px + 100vw)✅ 安全 -
calc(0 + 100vw)❌ 移动端大概率失效，整条规则不应用 -
calc(0% + 100vw)✅ 允许，但注意旧版 iOS Safari 对%和vw混用可能回退 - 自定义属性同理：
--gap: 0px才安全，--gap: 0就是埋雷
旧版安卓 WebView（如 Android 4.4）根本不支持混用单位
Android 4.4 WebView 基于 Chromium 30，calc() 支持极弱：不识别带空格的加减、拒绝 % + rem、vw/vh 混用更易崩溃。Sass/Less 无法 polyfill 这类运行时限制。
- 唯一可靠降级方式：手动层叠 fallback，固定值在前、
calc()在后，靠浏览器跳过不认识的值
例如：width: 288px; width: calc(100% - 2rem); - 不要用 Sass 函数试图“转换单位”——rem 在编译期未知，无法转成 px
- 微信 6.5.22 之前版本应放弃
calc()主逻辑，改用flex+padding或 JS 注入--vh - 小程序环境要防
rpx截断，可用calc(~"100vh - 30rpx")强制转义，但避免vw与rpx混用
真正难定位的永远不是单点问题：空格漏了 + 0 没带单位 + 预处理器又插了一脚——三者叠加时，你查兼容性、看 DevTools、甚至重写表达式都找不到根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
