calc()是css中用于声明时静态数学运算的函数，支持混合单位计算，但要求“+”“-”两侧必须空格、“*”“/”左右禁空格，不响应运行时变化，无法替代padding-top实现宽高比自适应。
calc() 能直接参与布局比例计算，但“复杂”二字往往卡在单位混用、嵌套失效、浏览器兼容边界这三处。别指望它自动推导宽高比或响应缩放，它的作用很明确：在声明时做一次静态数学运算，结果作为最终值参与渲染。
calc() 中混合单位的空格规则必须严格遵守
浏览器把 calc(100%-20px) 当作无效值处理，不是因为逻辑错，而是语法不合法。CSS 解析器要求 + 和 - 两侧必须有空格，* 和 / 左右则禁止空格（除非是括号分隔的子表达式）。
-
calc(100% - 20px)✅ 正确 -
calc(100% -20px)❌ 解析失败，退为初始值（如width会回退到auto） -
calc(100vw / 375 * 16)✅ 可用于实现 16:9 宽高比容器的宽度（配合padding-bottom: 56.25%） -
calc(100vw/375*16)❌ 多数浏览器拒绝解析，Chrome 120+ 才开始容忍部分省略空格场景，但不要依赖
calc() 无法替代 padding-top 实现真正的宽高比自适应
很多人试图用 height: calc(100vw * 9 / 16) 强制维持 16:9，但这是危险操作：视口单位在滚动、缩放、地址栏显隐时会抖动，且 height 不支持基于自身宽度的动态计算（即不能写 height: calc(width * 0.5625)）。真正稳定的做法仍是利用 padding-top 百分比基于父容器宽度的特性。
- 正确姿势：
.ratio-box { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }，再用position: absolute子元素撑满 -
calc()在这里只适合辅助计算 padding 值，比如padding-bottom: calc(100% / (16 / 9))—— 但注意：除法中16 / 9是常量，不能写成16/9（缺空格） - 若需 JS 动态注入比例，应生成内联
style，而非依赖 CSS 变量 +calc()，因 CSS 变量不能直接参与calc()的算术运算（除非用attr()，但目前仅限content属性）
calc() 与 rem/vw 混合使用时的精度陷阱
当设计稿基准是 375px，你写 font-size: calc(100vw / 375 * 100) 来模拟 rem 缩放，看似合理，实则埋雷：小屏下 100vw 可能小于 375px，导致 font-size 小于 1px，而浏览器会向下取整到 0，整个页面文字消失。这不是 bug，是规范行为。
- 安全写法必须加最小值约束：
font-size: max(12px, calc(100vw / 375 * 100));（max()IE 不支持，需降级） - 更稳妥的是用 JS 控制根字体大小，CSS 只负责
rem消费，避免在 CSS 层做跨数量级换算 -
calc(100vw - 1rem)这类写法在rem动态变化时不会重计算 ——calc()在样式解析阶段求值，不是运行时监听器
真正复杂的比例自适应，靠单个 calc() 函数撑不住。它只是工具链里最轻量的一环，关键在理解它不“智能”：没有条件分支、不响应变化、不感知上下文。把期望值压给它之前，先确认那个“计算”是不是真的能在 CSS 静态解析期完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
