horizontal-viewport-segments: 2是唯一能准确识别Z Fold展开态的媒体特性，必须单独使用并包裹于@supports中，值为整数2，不可比较或嵌套；vertical-viewport-segments: 2专用于竖折设备如Pocket，二者不可混用。
别用 min-width 或 orientation 做主逻辑——它们根本抓不住折叠屏的真实物理状态。能上线的唯一可靠方案是 horizontal-viewport-segments: 2 和 vertical-viewport-segments: 2，但必须配 @supports 降级，否则 Safari/Firefox 里样式直接消失。
怎么写才能让 Chrome/Edge 正确识别 Z Fold 展开态
水平铰链（如 Galaxy Z Fold）展开后，浏览器会渲染两个并列视口，但 document.body.clientWidth 返回的是单侧宽度（约 375–420px），不是总宽。靠 min-width: 720px 判断会彻底失效。
- 必须单独使用：
@media (horizontal-viewport-segments: 2)，不能拼接and (min-width: 768px)，部分浏览器会整条规则静默丢弃 - 必须包裹在
@supports (horizontal-viewport-segments: 2)内，否则旧版 Chrome、Safari、Firefox 完全不解析 - 值只能是整数
2，horizontal-viewport-segments > 1或horizontal-viewport-segments: 2px全部无效 - 匹配时布局应基于
grid-template-columns: 1fr 1fr或固定列宽，别依赖window.innerWidth算“总宽”
为什么 vertical-viewport-segments: 2 不能和 horizontal 混用
竖折设备（Z Fold）和横折设备（Pocket、Z Flip）的物理铰链方向不同，触发的媒体特性互斥。混用会导致变量覆盖、样式错乱，且无法反映真实渲染行为。
-
vertical-viewport-segments: 2只在翻盖式设备展开后激活，此时高度被分割，height: 50vh才有意义；height: 50%会因父容器无高而算出 0 - 对 Z Fold 写
vertical-viewport-segments: 2永远不匹配——它只响应水平铰链 - 不要共用同一组 CSS 变量，建议统一用
--fold-state: horizontal或--fold-state: vertical，避免:root中后声明覆盖前声明 - 两个规则必须分开维护，比如双栏用
horizontal，上下工具栏用vertical，不能复用同一套@media块
如何用 CSS 变量透传折叠状态并驱动布局
媒体查询本身不能直接赋值给变量，必须通过 @media 块内修改 :root 来“透传”。漏掉默认值会导致 var(--fold-state) 退化为空字符串，后续计算全部失效。
- 显式设默认值：
:root { --fold-state: single; --sidebar-span: 320px; }，不能省略 - 双屏水平态：
@media (horizontal-viewport-segments: 2) { :root { --fold-state: horizontal; --sidebar-span: 600px; } } - 大屏展开态（非折叠但宽屏）：
@media (min-width: 1200px) and (horizontal-viewport-segments: 1) { :root { --sidebar-span: 960px; } } - 侧边栏中用
flex-basis: var(--sidebar-span); transition: flex-basis 0.25s ease;，确保三态（窄/中/宽）平滑过渡
JS 监听折叠状态时最容易踩的坑
CSS 媒体查询只响应静态状态，但折叠过程有半开、动画帧、系统延迟上报等中间态。matchMedia 会频繁触发 false positive，不加处理 UI 就会抖动。
- 监听必须防抖：用
setTimeout或requestIdleCallback控制重绘频率，别直接在change回调里改 DOM - 读取值必须用
visualViewport.width，不是window.innerWidth——后者在 Pixel Fold 上常返回错误值 - 别信
screen-spanning：它没进标准，Chrome 119+ 也仅实验性支持，真机上极易返回not all导致样式失效 - UA 判断只能辅助，不能替代媒体特性：
navigator.userAgent在 WebView、HarmonyOS、PWA 场景下不可靠
真正难的不是写对那几行 @media，而是理解「物理分屏」和「逻辑尺寸」的区别——horizontal-viewport-segments: 2 不代表“变宽了”，而是“被铰链切成了两个独立 viewport”。一旦混淆这点，所有基于 width 的 fallback 都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
