VOCABULARY / 词条
自适应多面板布局
Adaptive Multipane Layout
让同一组面板依据可用宽度或容器尺寸增减、合并或拆分显示的栏数——宽窗口并排两栏或三栏,窄窗口收作单栏并辅以导航返回;它只约束这一重组过程本身,不改变各面板内部承载的信息类型。
识别特征
- 同一组面板在宽窗口并排显示两栏或三栏,在窄窗口收作单栏并提供返回或切换入口
- 面板栏数的合并与拆分由视口或容器宽度的断点触发,而不是用户手动切换布局模式
- 栏数变化前后,可行范围内的当前选择与滚动位置被保留,而不是重置到初始状态
概念边界
自适应多面板布局描述的是一组面板在不同屏幕宽度或窗口形状下如何增减、合并或拆分栏数,以及重组前后必须保留什么、可以推迟什么;它不重新定义任何一个面板内部该放什么内容或如何联动——列表选择驱动详情属于主从布局,较窄的参考或引用面板属于辅助面板布局,跨页面持续存在的导航或工具区属于侧栏布局。换句话说,这几种布局各自回答“面板里是什么、面板之间怎么联动”,而自适应多面板布局只回答“同样这组面板在变窄或变宽时如何重排”。
什么时候考虑它
- 产品的多栏体验需要同时兼容手机、平板与宽屏窗口,且不希望窄屏下整段内容直接丢失
- 应用可能运行在分屏、可调整宽度的桌面窗口等中间尺寸下,需要平滑过渡而不是在固定断点处生硬跳变
- 已经采用主从布局、辅助面板布局或侧栏布局中的一种或多种,需要为它们定义统一的跨尺寸重组规则
什么时候慎用
- 产品只面向一种固定宽度的目标设备,不需要处理多种尺寸下的重排
- 要解决的是某个面板内部该放什么内容、或它与其他面板如何联动,这属于主从布局、辅助面板布局或侧栏布局的职责,不属于这里
- 窄屏下打算直接丢弃某个面板的内容而不提供替代入口——这违反内容可达的底线,不应作为自适应方案采用
取舍
跨设备与跨窗口形状保持体验连贯、内容始终可达,但需要为每个断点定义面板的合并与拆分规则,并额外测试可调整宽度窗口等中间尺寸下的过渡是否流畅,而不是简单地在两三个固定断点之间跳变。
条件规则 · 编辑建议
相关词条
自适应多面板布局只定义这组面板如何随尺寸合并为单栏或拆分为多栏,并不改变主从布局中列表选择驱动详情内容的语义。
自适应多面板布局负责让辅助面板在窄屏时收起为可达入口,而面板内呈现的参考或来源内容仍由辅助面板布局定义。
单列布局本身只描述单栏体验;自适应多面板布局描述从多栏收敛到单栏这一变化过程,其窄屏终态往往就是单列布局。
来源与支持范围
说明容器查询让布局依据容器自身的行内尺寸(inline-size)而非视口来改变样式与排列方式,使同一组件或面板结构可以在不同容器宽度下重新组织显示形态,而不必依赖全局视口断点。
检索日期：2026-09-15 · 存档于 2026-09-16规定内容必须能够在等效于320 CSS像素宽度下呈现而不丢失信息或功能,且不需要双向滚动(仅内容本身因二维布局才有意义的部分除外);该成功标准的一致性等级为AA,为多面板收作单栏时可以收窄到多少、以及是否允许出现横向滚动划定了底线。
检索日期：2026-09-15 · 存档于 2026-09-16定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本;插图为编辑示意。落地到产品时仍须验证:断点处的合并与拆分是否符合等效320 CSS像素宽度下不出现双向滚动的要求、收起后的面板入口是否有文字或无障碍名称、栏数变化时当前选择与滚动位置是否被保留,以及可调整宽度窗口或分屏等中间尺寸下的过渡是否流畅而非生硬跳变。
{
"states": [
"three-pane",
"two-pane",
"single-pane"
],
"a11y": [
"栏数变化时不打断当前的焦点顺序,变化前聚焦的元素在新版式下仍可通过键盘到达",
"收起后的导航入口(如返回按钮或标签)有文字或无障碍名称,不能只依赖图标",
"收窄到单栏时,阅读顺序与视觉顺序保持一致,且不出现残留的横向滚动"
],
"motion": "栏数切换可使用短促过渡,并尊重减少动态偏好"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。