横屏时 position: fixed 元素错位怎么办
横屏后 fixed 元素没跟着视口重定位，常是因为它依赖了竖屏下的 top/left 值，而横屏时视口宽高互换、滚动方向变化，但 CSS 并不自动重算这些偏移。更麻烦的是，iOS Safari 在横屏切换瞬间会短暂保留旧布局尺寸，导致元素“卡”在错误位置。
- 别用
top: 50px这类绝对值，改用top: clamp(10%, 20px, 5%)或基于vh/vw的相对单位（如top: 5vh） - 对关键
fixed元素加transform: translateZ(0)，强制触发 iOS 的重绘，避免横屏后残留渲染 - 如果必须用像素值，media 查询里显式重置：
@media (orientation: landscape) { .header { top: 12px; right: 8px; } }
@media (orientation: landscape) 为什么有时不触发
不是所有设备都可靠上报 orientation，尤其 Android WebView 和部分折叠屏展开后仍报 portrait；另外，CSSOM 中的媒体查询监听可能滞后于实际旋转事件。
- 别只靠
(orientation: landscape)，叠加(min-height: 400px) and (max-width: 600px)等尺寸条件，提高匹配鲁棒性 - 在 JS 中监听
window.matchMedia('(orientation: landscape)')的change事件，手动补发一次resize，触发 CSS 重计算 - 某些安卓浏览器把横屏识别为
landscape-primary或landscape-secondary，可改用(orientation: landscape)（CSS Level 5 已统一，但兼容性需查 Can I Use）
横屏下 position: absolute 容器内子元素跑偏
当父容器设了 position: relative，子元素用 absolute 定位时，横屏后父容器宽高变化，但子元素的 right: 10px 或 bottom: 20px 仍按旧尺寸计算，视觉上就“偏了”。
- 优先用
inset替代单边偏移：.btn { inset: auto 10px 20px auto; }—— 横屏后浏览器会重新解析inset与当前盒模型的关系 - 避免
right+left同时设值，容易在横屏宽度突变时冲突；改用margin-left: auto配合right: 10px更稳定 - 如果父容器高度由内容撑开，横屏后高度收缩，
bottom: 20px可能超出可视区——此时加max-height: 100vh并设overflow: hidden防溢出
横屏重排后定位元素闪动或抖动
本质是浏览器在 orientation change 瞬间先重绘旧布局，再应用新 media 查询规则，中间存在帧差。特别是含 transform 或 opacity 的定位元素，更容易暴露这个间隙。
立即学习“前端免费学习笔记（深入）”；
- 给定位元素加
will-change: transform，提前告知浏览器该元素将频繁变化，提升合成层优先级 - 禁用横屏过渡动画：
@media (orientation: landscape) { * { transition: none !important; } }，避免动画干扰重排 - 极端情况可在 JS 中监听
orientationchange事件，在事件触发前临时设visibility: hidden，重排完成后再恢复，肉眼不可见但能消灭闪动
横屏定位重排真正难的不是写多少 media 规则，而是得同时盯住三件事：设备是否真实上报 orientation、CSS 是否在视口尺寸切换瞬间拿到正确 vw/vh、以及浏览器有没有把定位元素放进正确的合成层。漏掉任何一环，都会在某个机型上复现“明明写了规则却没生效”的问题。
