如何在CSS中处理移动端折叠屏手机的跨屏布局显示？

应使用 horizontal-viewport-segments 和 vertical-viewport-segments 媒体特性判断真实分屏：horizontal-viewport-segments: 2 表示竖折双视口，vertical-viewport-segments: 2 表示横折双视口，需配合 @supports 检测并提供降级方案。

怎么用 horizontal-viewport-segments 和 vertical-viewport-segments 判断真实分屏

别再靠 window.innerWidth 或 @media (min-width: 768px) —— 折叠屏展开后单侧宽度可能只有 375px，但已是双视口物理分割状态。真正能区分“是否被铰链切开”的，是这两个标准媒体特性：

• horizontal-viewport-segments: 2 表示竖折（如 Galaxy Z Fold 展开），浏览器渲染两个并列横向视口
• vertical-viewport-segments: 2 表示横折（如华为 Pocket 2 展开），视口被垂直铰链分割
• 必须配合 @supports 检测，否则旧浏览器会直接忽略整条规则：

  @supports (horizontal-viewport-segments: 2) { :root { --fold-state: horizontal; } }

• Safari 和 Firefox 当前不支持，降级方案得写两套：@media (min-width: 720px) and (min-height: 840px) + JS 检测 navigator.userAgent.includes('Fold')

为什么 display: none 在跨屏场景下会出问题

折叠屏用户可能依赖屏幕阅读器、键盘导航或触控辅助，display: none 会让元素彻底从可访问树中移除；width: 0 则破坏 flex 布局流，导致 flex-basis 计算异常。更稳妥的做法是组合使用：

• flex-basis: var(--sidebar-span); 控制基础跨度
• min-width: 0; 允许内容收缩到极小值而不撑开容器
• overflow: hidden; 隐藏溢出，避免视觉错位
• 动画只作用于 flex-basis，不要对变量做 calc(var(--sidebar-span) - 80px) 运算——Chrome 119+ 在媒体查询切换时不会重算该表达式

如何用 spanning 媒体特征识别跨铰链渲染

spanning 不是尺寸判断，而是回答“这个元素有没有被强制画在两个物理屏幕上”。它直接影响布局行为和性能：

• (spanning: single-fold-horizontal)：元素横跨垂直铰链 → position: sticky 失效，transform 可能被截断
• (spanning: none)（默认）：元素完全落在单侧视口内，行为正常
• 别主动给导航栏加 spanning: single-fold-horizontal 期望它横跨两屏——浏览器需实时合成跨屏图层，滚动卡顿明显
• 优先用 Grid 布局规避跨铰链：grid-template-areas 显式声明折叠态为 "main"、展开态为 "sidebar main"，不依赖 DOM 重排

Grid 布局比 Flexbox 更适合折叠屏三态响应

Flexbox 的线性流在折叠/展开切换时容易错位（比如中间模块被挤到顶部），而 Grid 的命名区域能稳定锚定位置：

立即学习“前端免费学习笔记（深入）”；

• 每个 grid-area 名称必须唯一、无空格、无特殊字符，否则解析失败且静默忽略
• 展开态推荐写法：

  @media (horizontal-viewport-segments: 2) { .container { grid-template-areas: "sidebar main"; } }

• 避免在 @media 中频繁切换 grid-template-areas 配合 animate —— 某些 Android WebView 会触发重绘抖动
• 如果用了 Vue/React 动态挂载组件，确保 grid-area 类名在初始渲染时已存在，否则首次加载不生效

实际项目里最容易被忽略的，是降级逻辑的完整性：没匹配到任何 viewport-segments 时，:root 中必须显式设 --fold-state: single，否则 var(--fold-state) 返回 unset，后续所有 calc() 和 if() 条件都会失效。