移动端屏幕旋转后百分比值“算歪”是因参照系突变：父容器高度归零、100vh 锁定初始值、margin 百分比恒按父宽计算、calc() 混用单位导致错层，需用 min-height: 100dvh、padding-top、vw 等动态适配方案。
移动端旋转屏幕后，top、margin、height 等百分比值突然“算歪了”，不是 CSS 解析出错，而是参照物在旋转瞬间被重置或错位——最常踩的坑是父容器高度归零、100vh 锁死初始值、以及 margin-top: 20% 实际按宽度算却误当高度用。
父容器高度在旋转后变成 auto，导致所有子元素百分比失效
竖屏时父容器靠内容撑开有 600px 高，top: 50% 算出 300px；横屏后视口变宽，但父容器若没设 height 或 min-height，它会退化为 height: auto → 实际计算高度变成 0px → top: 50% 就是 0px。这不是 bug，是规范行为。
- 用开发者工具选中该父容器 →「Computed」→ 查
height值，若显示auto且数值极小（如 1px），就是根源 - 修复方式：给父容器加
min-height: 100dvh（推荐）或min-height: 100vh（兼容性稍差） - 特别注意：Flex/Grid 容器即使写了
flex: 1或grid-template-rows: 1fr，自身若没高度，子项的百分比仍无效
margin 百分比始终按父宽计算，和方向切换无关但极易误判
margin-top: 20% 在竖屏下看着合理，横屏后却突然“跳高”——因为它的 20% 始终基于父容器的 宽度，不是高度。横屏时父宽变大，20% 对应像素值就暴涨，视觉上像“被顶上去”。
- 垂直方向想靠比例控制间距，优先用
padding-top（参照父高）或transform: translateY(20%)（参照自身高） -
margin百分比无法绕过宽度基准，混用top和margin-top控制同一位置极易错层 - 调试时可临时加
outline: 1px solid red到父容器，观察其宽高变化是否与预期一致
100vh 被锁定在旋转前的高度，不再响应新视口
iOS Safari 和部分安卓 WebView 中，height: 100vh 在页面加载时取一次视口高度，之后横竖屏切换、键盘弹出都不会更新——竖屏时是 812px，横屏后仍是 812px，但实际可视高度可能只剩 400px，导致内容被截断或底部留白。
- 改用
min-height: 100dvh（dynamic viewport height），Android Chrome 100+ / iOS 16.4+ 支持，会动态响应视口变化 - 无
dvh支持时，用min-height: 100vh; max-height: 100dvh;双保险，fallback 到vh - 绝对定位元素慎用
bottom: 0+height: 100vh组合，键盘收起后bottom: 0会卡在旧视口底边
viewport 缩放和 safe-area 导致 calc() 计算错层
横屏后地址栏收起，visualViewport.height 突然增大，但 calc(50% - 20px) 里的 50% 按缩放后容器宽算，20px 却被设备像素比二次放大，两者基准不一致，结果偏移放大。
- 避免在
calc()里混用%和px，尤其在旋转敏感区域（如 fixed 导航栏） - 固定视觉间距改用
vw单位，例如margin-top: 5vw比margin-top: calc(5% - 10px)更稳 - fixed 元素定位优先用
top: env(safe-area-inset-top) + 10px，而非top: 10%，避开视口高度波动
真正难调的不是某一行代码，而是多个参照系在旋转瞬间同时漂移：父高归零、vh 锁死、margin 基准突变、calc 单位错层——它们叠加起来，让 top: 30% 在横屏后变成 3px 而不是 300px，而你还在检查媒体查询有没有生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
