应使用 horizontal-viewport-segments 和 vertical-viewport-segments 媒体特性配合 :root CSS 变量透传折叠状态，通过 @media 块动态设置 --fold-state 和 --sidebar-span 等变量实现三态响应式布局，避免 display: none 或 width: 0，改用 flex-basis + min-width: 0 + overflow: hidden 组合保障可访问性与动画，并显式设置 flex: 1 1 0 和 flex-wrap: nowrap 确保主内容区稳定适配。
怎么用 CSS 变量识别折叠屏的双视口状态
不能靠 @media (prefers-holographic) 做主逻辑——它目前仅在少数实验性浏览器中可用，且行为不稳定；真正可落地的是 horizontal-viewport-segments 和 vertical-viewport-segments 这两个已进入 Chrome 110+、Edge 110+、Safari 16.4+ 标准的媒体特性。
关键点在于：这些媒体查询本身不支持直接赋值给 CSS 变量，必须用 @media 块内修改 :root 变量来“透传”状态：
- 检测水平铰链（书本式折叠）：
@media (horizontal-viewport-segments: 2)→ 设--is-dual-pane: 1 - 检测垂直铰链（翻盖式折叠）：
@media (vertical-viewport-segments: 2)→ 设--is-flip-fold: 1 - 避免同时设多个变量覆盖，建议统一用
--fold-state：值为single/horizontal/vertical - 必须加降级：未匹配任何分段时，
:root中显式设默认值，否则变量为unset，var(--fold-state)会退化为空字符串
如何用变量控制侧边栏在折叠/展开态下的宽度跨度
别再写 .sidebar--expanded 和 .sidebar--collapsed 两套 class。折叠屏的真实需求是「三态」：单屏窄（320px）、双屏中（600px）、展开宽（960px），而每种状态的宽度应由变量驱动，而非硬编码。
正确做法是把跨度逻辑收进一个变量，并确保它能被动画平滑过渡：
立即学习“前端免费学习笔记（深入）”；
- 定义基础变量：
:root { --sidebar-span: 320px; } - 在双屏水平态下更新：
@media (horizontal-viewport-segments: 2) { :root { --sidebar-span: 600px; } } - 在大屏展开态下更新：
@media (min-width: 1200px) and (horizontal-viewport-segments: 1) { :root { --sidebar-span: 960px; } } - 侧边栏样式中使用：
flex-basis: var(--sidebar-span); min-width: 0; transition: flex-basis 0.25s ease; - 注意：不要对
--sidebar-span做calc()运算（如calc(var(--sidebar-span) - 80px)），部分浏览器在媒体查询切换时无法触发该表达式的重计算
为什么 display: none 或 width: 0 在折叠屏上会破坏可访问性和动画
折叠屏用户可能依赖屏幕阅读器、键盘导航或触控辅助工具，display: none 会让元素彻底退出渲染树和无障碍树；width: 0 则因 flex 项默认 min-width: auto 而无法真正压缩到 0，导致视觉残留或布局错位。
真实项目中更安全的做法是组合使用三个声明，让 DOM 始终可访问、可聚焦、可动画：
-
flex-basis: var(--sidebar-span);—— 宽度由变量驱动，可动画 -
min-width: 0;—— 解除 flex 项最小尺寸限制，允许压缩至接近 0 -
overflow: hidden;—— 隐藏溢出内容，避免图标或文字“挤出”容器 - 额外加固：若侧边栏含
input或button，需确保它们未被pointer-events: none或visibility: hidden意外禁用
如何让主内容区在不同折叠态下自动适配剩余空间
很多团队误以为给主区域设 flex: 1 就万事大吉，但在折叠屏频繁切换过程中，这会导致内容区宽度跳变、文本折行异常甚至横向滚动条闪现。
稳定方案是显式控制三项 flex 属性，并约束父容器行为：
- 主内容区设：
flex: 1 1 0;（即flex-grow: 1; flex-shrink: 1; flex-basis: 0;） - 父容器必须为：
display: flex; flex-direction: row; flex-wrap: nowrap;（nowrap显式声明，防止 Safari 对分段视口解析异常） - 侧边栏与主内容区都加：
min-width: 0;—— 防止内部长单词、URL 或 SVG 路径撑破 flex 计算 - 主内容区内若有表格或代码块，追加：
overflow-x: auto;+width: 100%;，避免内容被截断 - 慎用
max-width：它会和flex-basis冲突，在双视口态下可能导致主区域无法填满左屏
最易被忽略的是：折叠屏切换时，浏览器可能延迟触发 layout，导致首次渲染仍按旧尺寸计算。务必在 JS 中监听 resize 和 orientationchange，并在必要时强制触发一次 getComputedStyle 读取，以同步样式状态。
