移动端屏幕旋转后布局抖动的根本原因是浏览器重排，而非动画不流畅；核心解法是切断重排链，避免@media切换时触发width/height等布局属性计算，优先用100%或100dvw替代100vw，显式重设flex-direction或grid-template-columns，并用env(safe-area-inset-top)+calc()稳定fixed元素定位。
移动端屏幕旋转后布局抖动，根本不是“动画不流畅”，而是浏览器在重排（reflow）——只要样式变动触发了 width、height、margin、top/left 等布局属性计算，抖动就必然发生。核心解法不是调动画时长，而是切断重排链。
为什么 @media (orientation: ...) 一加就抖
媒体查询本身不抖，抖的是它切换时引发的连锁反应：比如横屏规则里写了 width: 100vw，而 Safari 横屏时 100vw 会包含已隐藏的地址栏高度，导致实际可渲染宽度变小，内容被挤出、触发横向滚动、进而触发 body 重排；又或者竖屏用 flex-direction: column，横屏切 row 时子项尺寸未约束，flex-basis 计算偏差引发换行跳变。
-
100vw在 iOS 横屏下 ≠ 实际可视宽度，改用100%或100dvw（Android Chrome 100+ 支持） - 避免在 orientation 媒体查询里直接改
height或font-size，优先用clamp()控制字号范围 - Flex/Grid 容器必须显式重设
flex-direction或grid-template-columns，不能依赖“自动适配”
fixed 元素在横屏下跑偏怎么稳住
移动端 fixed 元素抖动，本质是 visual viewport 和 layout viewport 在旋转/键盘弹出时不同步。浏览器先按旧视口定位，再重绘新尺寸，元素就“闪一下”。用 top: 0 这类绝对值定位，在横屏后地址栏收起瞬间会错位。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 改用
top: env(safe-area-inset-top)+calc()组合，兼容刘海屏和动态视口变化 - 避免对 fixed 元素设
width: 100vw，改用width: 100%并确保父容器有overflow-x: hidden - 真机测试时，手动触发键盘弹出/收起，观察 fixed 元素是否延迟回位——这是 visualViewport.height 滞后导致的，需加
setTimeout(() => {}, 50)防抖读取
如何用 scrollbar-gutter 提前暴露抖动源
很多抖动其实是横向溢出没被发现：横屏后某个卡片宽度超了 1px，触发横向滚动条出现，body 宽度突变，所有居中元素集体右移——肉眼只看到“抖”，实际是滚动条空间被吃掉。
- 开发期加
html { overflow-y: scroll; scrollbar-gutter: stable; }，强制预留滚动条空间 - 加
body { overflow-x: auto; }，一旦有元素超宽，立刻出现横向滚动条，等于实时告警 - 滚动容器（如列表、弹窗）统一加
scrollbar-gutter: stable both-edges，左右对称留白，避免居中偏移
真正难的不是写对一条 media query，而是在横屏规则里避开所有隐性重排触发点：vw/vh 单位、未约束的 flex-basis、absolute 元素没锚定到 relative 父容器、fixed 元素依赖静态 top 值——这些细节在模拟器里全正常，一上真机就抖得明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
