必须用 @supports (horizontal-viewport-segments: 2) 包裹媒体查询，因 Firefox/Safari 不支持该特性，且 Chrome/Edge 对混合写法会静默丢弃规则；vertical-viewport-segments: 2 仅适用于横折设备，不可与 horizontal 混用；需用 CSS 变量透传折叠状态并配合 flex-basis 实现平滑过渡，避免 display: none 或硬编码 class。
只能用 horizontal-viewport-segments: 2 和 vertical-viewport-segments: 2 这两个媒体特性，其他写法（比如 screen-spanning）浏览器直接忽略，不生效也不报错。
为什么不能用 min-width 或 orientation 判断双屏展开
折叠屏展开后，window.innerWidth 返回的仍是单侧宽度（Z Fold 展开约 390px），不是总宽；orientation: landscape 在 Z Fold 横向展开时可能仍是 portrait。结果就是布局错乱、侧边栏消失、内容被裁切。
-
@media (min-width: 768px)在 Z Fold 展开态下完全不匹配 -
@media (orientation: landscape)对翻盖或竖折设备不可靠 - 混合写法如
@media (min-width: 768px) and (horizontal-viewport-segments: 2)会导致整条规则被 Chrome/Edge 静默丢弃
必须用 @supports 包裹 @media (horizontal-viewport-segments: 2)
Firefox 和 Safari 完全不支持这两个特性，不加 @supports，样式就彻底失效，连降级逻辑都进不去。
- 正确顺序：
@supports (horizontal-viewport-segments: 2) { @media (horizontal-viewport-segments: 2) { ... } } -
@supports必须在外层，不能颠倒 - 别在
@supports外再写同名 CSS 变量，后声明的会覆盖双屏块里的设置
用 CSS 变量透传折叠状态，别写多套 class
硬编码 .sidebar--dual / .sidebar--single 无法应对三态（窄屏/双栏/大屏展开），且破坏可访问性与动画连续性。
立即学习“前端免费学习笔记（深入）”；
- 在
:root中设默认值：--fold-state: single; --sidebar-span: 320px; - 双屏水平展开时更新：
@media (horizontal-viewport-segments: 2) { :root { --fold-state: horizontal; --sidebar-span: 600px; } } - 侧边栏用
flex-basis: var(--sidebar-span); min-width: 0; transition: flex-basis 0.25s ease;，避免display: none或width: 0 -
vertical-viewport-segments: 2是给华为 Mate X3、Pocket 这类横折机用的，和 Z Fold 互斥，别混用
真正难的不是写对那几行媒体查询，而是降级逻辑得同时扛住 UA 误判、半开态抖动、以及 Safari/Firefox 完全不认新特性的事实——@supports 不是可选项，是保命线。
