如何在CSS3中利用变量快速适配横竖屏布局-css教程-PHP中文网

直接用@media (orientation: landscape)配合css变量不可靠，必须加防错层：它仅在重排后比对宽高比，不读传感器，ios地址栏未收起或旧版android chrome会导致不匹配；变量需在每个媒体查询内显式重设并兜底。

如何在css3中利用变量快速适配横竖屏布局

直接用 @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);
}
}</p>

注意：@media not all and (...) 是目前最稳妥的兜底写法，比单纯依赖 :root 初始值更可靠。