优先用calc(100% - Xpx)，因100%依赖父容器宽度更可控；100vw虽直连视口但受Safari精度截断、状态栏宽度及滚动条影响易溢出，且在Flex/Grid中行为不可靠。
calc() 能算，但移动端动态宽度失效，90% 是因为单位基准错配、布局模式冲突或 Safari 的精度截断，不是表达式写错了。
calc(100vw - Xpx) 和 calc(100% - Xpx) 在移动端到底该用哪个？
不是“哪个更好”，而是“哪个在当前上下文里真起作用”：
-
100vw总是相对于视口，不依赖父容器宽，适合position: fixed或根级容器；但 iOS Safari 竖屏时会包含状态栏宽度（约 20–44px），导致右侧轻微溢出 -
100%依赖父容器的width值，如果父容器是display: block且没设宽，它的“100%”可能等于内容撑开的宽度，甚至为0 - Flex/Grid 容器中，
100%行为更不可靠 —— 子项的主轴尺寸由flex-basis或grid-column主导，width会被忽略 - 实操建议：侧边栏用
flex: 0 0 calc(100vw - 240px)，主内容区加min-width: 0防止 flex 不收缩
为什么 calc(100% - 2rem) 在 Safari 里算不准？
不是 rem 错了，是 Safari 15.4 之前对 vw - rem 或 % - rem 的浮点精度截断太激进，比如 calc(100vw - 2rem) 可能直接被算成 100vw，rem 部分被舍掉：
- 优先把 rem 换成 px：比如
calc(100vw - 32px)，只要设计稿基准是 16px，2rem = 32px 就足够准 - 若必须用 rem，请确保
:root的font-size是固定值（不用 JS 动态改），否则重排不触发重新计算 - 加
min-width: 0强制 Safari 重新评估表达式 —— 小技巧，但对 flex 子项特别有效 - 别写
calc(100% - 2 rem)：单位前不能有空格，2rem✅，2 rem❌
怎么避免 calc + 媒体查询的冗余维护？
拆成多个 @media 写 calc() 是典型反模式，既难覆盖所有断点，又容易漏掉中间状态：
立即学习“前端免费学习笔记（深入）”；
- 用
min()替代条件分支：width: calc(100% - min(32px, 4vw))—— 小屏取固定边距，大屏随视口缩进 - 加安全上下限用
clamp()：width: clamp(320px, calc(100% - 2rem), 768px)，中间值仍是动态的 - 注意兼容性：
min()和clamp()在 Safari 15.4+、Firefox 91+ 才稳定，旧版需回退到媒体查询 +calc()组合 - 别在
grid-template-columns里塞复杂calc()，Safari 旧版支持极差，比如calc(1fr - 20px)可能直接归零
最容易被忽略的硬性语法坑
这些错误不会报错，但整条声明会被浏览器静默丢弃，开发者工具里显示为 strike-through 灰色：
-
+和-两侧**必须有空格**：calc(100% - 20px)✅，calc(100%-20px)❌ - 乘除运算中，
*和/一侧必须是纯数字：calc(100% * 2)✅，calc(100% * 2rem)❌ -
calc()只作用于接受长度值的属性：width、margin、font-size可以，z-index、opacity、line-height（无单位时）不行 - 不要嵌套：
calc(calc(100% - 20px) + 10px)虽部分浏览器支持，但 IE 完全不认，且增加解析负担
真正卡住的往往不是公式多复杂，而是 box-sizing 没设成 border-box、父容器 overflow: hidden 截断了计算结果、或者 flex 下误用了 width 而不是 flex-basis。
