直接用@media (orientation: landscape)配合CSS变量不可靠，必须加防错层：它仅在重排后比对宽高比，不读传感器，iOS地址栏未收起或旧版Android Chrome会导致不匹配；变量需在每个媒体查询内显式重设并兜底。
直接用 @media (orientation: landscape) 配合 CSS 变量是可行的，但必须加防错层——否则真机上大概率不触发、延迟、或样式错乱。
为什么 orientation 媒体查询单独配变量会失效
浏览器不是实时监听陀螺仪，而是等重排完成后再比对 window.innerWidth 和 window.innerHeight。这意味着：
- 旋转过程中变量不会更新，直到动画结束、布局稳定后才计算一次
- iOS Safari 在地址栏未收起时，
innerHeight仍大于innerWidth，(orientation: landscape)根本不匹配 - 部分 Android Chrome（v105 之前）只读取初始方向，后续旋转完全不响应
-
:root里定义的变量无法被@media动态“注入”，必须显式在块内重设
正确写法：媒体查询 + 显式 :root 覆盖 + 降级兜底
别把变量定义放在顶层 :root 后就不管了。每个 @media 块都得完整覆盖关键变量，并提供默认值：
:root {
--layout-dir: column;
--main-gap: 12px;
--text-size: clamp(14px, 2.5vw, 16px);
}
<p>@media (orientation: portrait) {
:root {
--layout-dir: column;
--main-gap: 12px;
--text-size: clamp(14px, 2.5vw, 16px);
}
}</p><p>@media (orientation: landscape) {
:root {
--layout-dir: row;
--main-gap: 24px;
--text-size: clamp(16px, 1.8vw, 18px);
}
}</p><p>/<em> 必须加这句：防止未命中任何媒体查询时变量为 unset </em>/
@media not all and (orientation: portrait), not all and (orientation: landscape) {
:root {
--layout-dir: column;
--main-gap: 12px;
--text-size: clamp(14px, 2.5vw, 16px);
}
}注意：@media not all and (...) 是目前最稳妥的兜底写法，比单纯依赖 :root 初始值更可靠。
立即学习“前端免费学习笔记（深入）”；
用变量驱动 layout，但别碰 flex-direction 动画
CSS 不支持 flex-direction 的过渡动画，强行加 transition: flex-direction 会被忽略。真正能平滑切换的是结构属性：
- 用
flex-direction: var(--layout-dir)控制主轴，但不要指望它动 - 把动画交给
gap、padding、max-width这类可过渡属性 - 需要视觉反馈时，改用
transform: scale()或 opacity 配合will-change: transform - 侧边栏宽度切换别用
width，改用flex-basis: var(--sidebar-width)+min-width: 0
真机测试必须绕过模拟器陷阱
Chrome DevTools 的 “Rotate” 按钮只改 window.orientation，不触发真实重排逻辑。以下三点必须实测：
- 在 iOS Safari 中横屏后快速上下滚动，看
gap是否立即生效 - Android Chrome 打开地址栏再收起，观察
--layout-dir是否从row回退到column - 折叠屏设备半展开状态（如 Galaxy Z Fold 屏幕比例 22:9），验证
(orientation: landscape)是否误判
最容易被忽略的是：变量名本身不重要，但每个 @media 块里的赋值必须完整、独立、无继承假设——CSS 变量没有“作用域链”，只有最后一次声明生效。
