应使用 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() 条件都会失效。
