应使用horizontal-viewport-segments: 2和vertical-viewport-segments: 2判断物理分屏状态，前者识别竖折（如Z Fold展开），后者识别横折（如Pocket 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; }
}
@supports (vertical-viewport-segments: 2) {
:root { --fold-state: vertical; }
}
- Safari 和 Firefox 当前不支持，降级方案得写两套：
@media (min-width: 720px) and (min-height: 840px)+ JS 检测navigator.userAgent.includes('Fold') - 不要同时为同一元素写两个
@supports块——:root中的 CSS 变量会被后声明的覆盖，建议统一用--fold-state控制 -
screen-spanning不可靠：仅 Chrome 119+/Edge 97+ 有限支持，且依赖系统开关、无 iframe、非缩放等苛刻条件，真机上极易失效
避免用 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+ 在媒体查询切换时不会重算该表达式
优先用 grid-template-areas 替代 Flexbox 布局
Flexbox 的线性流在折叠/展开切换时容易错位（比如中间模块被挤到顶部），而 Grid 的命名区域能稳定锚定位置：
@supports (horizontal-viewport-segments: 2) {
.layout { grid-template-areas: "sidebar main"; }
}
@media (max-width: 480px) {
.layout { grid-template-areas: "main"; }
}
-
spanning媒体特征不是尺寸判断，而是回答“这个元素有没有被强制画在两个物理屏幕上”；它直接影响布局行为和性能 -
position: sticky在跨铰链渲染时会失效，transform可能被截断，这是规范明确标注的限制 - 别主动给导航栏加
spanning: single-fold-horizontal期望它横跨两屏——浏览器需实时合成跨屏图层，滚动卡顿明显
容器查询（@container）比媒体查询更适合局部响应
折叠屏里常有多个可变尺寸区域（比如左侧导航栏收缩、右侧内容区拉伸），@media 只能监听整个视口变化，无法感知某个 div 自身尺寸改变。容器查询让组件“自己看自己”。
启用前必须显式设置上下文：
- 给目标容器加
container: card / inline-size（inline-size是最常用且兼容性最好的选项） - 父容器需有明确尺寸（如设置了
width、max-width，或处于受约束的 Flex/Grid 子项中） - 查询条件只能用
min-width或inline-size，不能用min-width的变体（如min-inline-size尚未广泛支持） - 不要在
@container外再套@media做“双重保险”，这反而会破坏其独立性
Chrome 110+、Edge 110+、Safari 16.4+ 支持，Firefox 尚未支持；线上项目务必加降级方案，例如 fallback 到 @media (min-width: )。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
