calc()在移动端适配中不能直接写height: calc(100vh - 60px)，因为iOS Safari和部分安卓浏览器将地址栏高度计入100vh，滚动时vh突变导致高度跳变、内容裁切或留白。
calc() 在移动端适配中为什么不能直接写 height: calc(100vh - 60px)
因为 100vh 在 iOS Safari 和部分安卓浏览器里会把地址栏高度算进去，页面滚动时 vh 值突变，导致 calc() 计算出的高度跳变、内容被裁或留白。这不是你公式写错了，是浏览器对 vh 的实现不一致。
实操建议：
- 避免依赖
100vh做关键布局高度，尤其在有固定顶部/底部栏的页面 - 用 JavaScript 动态读取
window.innerHeight并写入 CSS 自定义属性，再在calc()中引用，例如：:root { --vh: 100vh; }<br>@supports (height: 100vh) {<br> :root { --vh: 100vh; }<br>}<br>body { height: calc(var(--vh, 100vh) * 1 - 60px); } - 更稳妥的做法：用
min-height: 100%配合父容器display: flex+flex-direction: column，让内容区自动撑满剩余空间
移动端不同屏幕比例下，calc() 算边距容易失效的常见原因
不是 calc() 本身有问题，而是你混用了绝对单位（px）和相对单位（vw、rem），而某些机型的缩放设置或系统字体调节会让 rem 基准偏移，vw 又受 viewport 缩放影响。
实操建议：
- 统一用
vw或vmin做响应式边距，例如：margin: calc(2vmin + 4px)比margin: calc(1rem + 4px)更稳定 - 避免在
calc()中做跨单位除法，比如calc(100% / 3.75)—— 小数精度在低端 Android 上可能四舍五入出错 - 测试时打开系统「显示大小与文字」调节，观察边距是否随字体缩放意外变化；若变化，说明你误用了
rem或em
用 calc() 实现“等比缩放容器”时，宽高比失真的典型场景
写成 width: 100%; height: calc(100% * 0.5625) 看似合理，但实际渲染时，父容器若没设定明确高度（比如仅靠内容撑开），100% 会按 0 计算，结果就是高度为 0。
实操建议：
- 等比容器必须有明确的宽度基准，推荐用
padding-top百分比占位法，而不是依赖height: calc() - 如果坚持用
calc()，确保父容器有height（哪怕用min-height），且该高度可被继承或计算 - 横竖屏切换时，
vmin比vw/vh更可靠，例如：height: calc(16vmin * 9 / 16)能自适应方向变化
Android WebView 和微信内置浏览器对 calc() 的兼容性陷阱
老版本 Android WebView（特别是 4.4–5.1）不支持在 calc() 中混用单位，比如 calc(100% - 1rem) 会直接忽略整条样式；微信 6.5.22 之前也不支持 vmin 和 vmax。
实操建议：
- 用
@supports (height: calc(1px))做特性检测，降级到 JS 动态计算或固定值 - 避免在
calc()中使用rem，改用px或vw；如需适配字体，用 JS 监听textSizeAdjust变化后重设根字体 - 上线前务必真机测试：华为 EMUI 4.x、小米 MIUI 8、微信 Android 6.6.x 这几个典型环境
最麻烦的不是怎么写 calc()，而是它看起来什么都能算，结果在某个系统版本里悄悄失效——而且不报错、不警告，只默默渲染错。所以每次加一行 calc()，最好都配上对应机型的截图比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
