自适应多面板布局

尚无可操作的样本;插图为编辑示意。落地到产品时仍须验证:断点处的合并与拆分是否符合等效320 CSS像素宽度下不出现双向滚动的要求、收起后的面板入口是否有文字或无障碍名称、栏数变化时当前选择与滚动位置是否被保留,以及可调整宽度窗口或分屏等中间尺寸下的过渡是否流畅而非生硬跳变。

{
  "states": [
    "three-pane",
    "two-pane",
    "single-pane"
  ],
  "a11y": [
    "栏数变化时不打断当前的焦点顺序,变化前聚焦的元素在新版式下仍可通过键盘到达",
    "收起后的导航入口(如返回按钮或标签)有文字或无障碍名称,不能只依赖图标",
    "收窄到单栏时,阅读顺序与视觉顺序保持一致,且不出现残留的横向滚动"
  ],
  "motion": "栏数切换可使用短促过渡,并尊重减少动态偏好"
}

{
  "id": "adaptive-multipane",
  "type": "layout",
  "name": {
    "zh": "自适应多面板布局",
    "en": "Adaptive Multipane Layout"
  },
  "aliases": [
    "自适应分栏布局",
    "响应式多面板布局",
    "Responsive Multi-Pane Layout"
  ],
  "granularity": "page",
  "intents": [
    "organize-content",
    "adapt-layout"
  ],
  "tags": [
    "响应式布局",
    "断点",
    "面板重组",
    "窄屏适配",
    "跨设备一致性"
  ],
  "definition": "让同一组面板依据可用宽度或容器尺寸增减、合并或拆分显示的栏数——宽窗口并排两栏或三栏,窄窗口收作单栏并辅以导航返回;它只约束这一重组过程本身,不改变各面板内部承载的信息类型。",
  "boundary": "自适应多面板布局描述的是一组面板在不同屏幕宽度或窗口形状下如何增减、合并或拆分栏数,以及重组前后必须保留什么、可以推迟什么;它不重新定义任何一个面板内部该放什么内容或如何联动——列表选择驱动详情属于主从布局,较窄的参考或引用面板属于辅助面板布局,跨页面持续存在的导航或工具区属于侧栏布局。换句话说,这几种布局各自回答“面板里是什么、面板之间怎么联动”,而自适应多面板布局只回答“同样这组面板在变窄或变宽时如何重排”。",
  "signature": [
    "同一组面板在宽窗口并排显示两栏或三栏,在窄窗口收作单栏并提供返回或切换入口",
    "面板栏数的合并与拆分由视口或容器宽度的断点触发,而不是用户手动切换布局模式",
    "栏数变化前后,可行范围内的当前选择与滚动位置被保留,而不是重置到初始状态"
  ],
  "when": [
    "产品的多栏体验需要同时兼容手机、平板与宽屏窗口,且不希望窄屏下整段内容直接丢失",
    "应用可能运行在分屏、可调整宽度的桌面窗口等中间尺寸下,需要平滑过渡而不是在固定断点处生硬跳变",
    "已经采用主从布局、辅助面板布局或侧栏布局中的一种或多种,需要为它们定义统一的跨尺寸重组规则"
  ],
  "when_not": [
    "产品只面向一种固定宽度的目标设备,不需要处理多种尺寸下的重排",
    "要解决的是某个面板内部该放什么内容、或它与其他面板如何联动,这属于主从布局、辅助面板布局或侧栏布局的职责,不属于这里",
    "窄屏下打算直接丢弃某个面板的内容而不提供替代入口——这违反内容可达的底线,不应作为自适应方案采用"
  ],
  "tradeoff": "跨设备与跨窗口形状保持体验连贯、内容始终可达,但需要为每个断点定义面板的合并与拆分规则,并额外测试可调整宽度窗口等中间尺寸下的过渡是否流畅,而不是简单地在两三个固定断点之间跳变。",
  "comparison": {
    "focus": "让同一组面板依据可用宽度重组栏数,而不规定各面板承载的内容类型",
    "mechanism": "按断点或容器宽度增减并排的栏数,窄屏退回单栏并辅以导航入口",
    "cost": "需要为每个尺寸定义合并与拆分规则,并维护选择状态、滚动位置在重排前后的连续性"
  },
  "sources": [
    {
      "id": "adaptive-multipane-mdn-container-queries",
      "title": "MDN Web Docs · CSS containment / Container queries",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries",
      "claim": "说明容器查询让布局依据容器自身的行内尺寸(inline-size)而非视口来改变样式与排列方式,使同一组件或面板结构可以在不同容器宽度下重新组织显示形态,而不必依赖全局视口断点。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries",
        "status": "available",
        "checkedAt": "2026-09-16T05:40:09.474Z",
        "jobId": "spn2-a4f5f84cfd5ea1e3a53422fd0c4b64322503ae77",
        "url": "https://web.archive.org/web/20260916054131/https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries",
        "timestamp": "20260916054131"
      }
    },
    {
      "id": "adaptive-multipane-wcag-reflow",
      "title": "W3C WAI · WCAG 2.2 Understanding Success Criterion 1.4.10: Reflow",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html",
      "claim": "规定内容必须能够在等效于320 CSS像素宽度下呈现而不丢失信息或功能,且不需要双向滚动(仅内容本身因二维布局才有意义的部分除外);该成功标准的一致性等级为AA,为多面板收作单栏时可以收窄到多少、以及是否允许出现横向滚动划定了底线。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/reflow.html",
        "status": "available",
        "checkedAt": "2026-09-16T05:40:47.748Z",
        "jobId": "spn2-6485fb0b5cd24ce204985b64d578556e776712cf",
        "url": "https://web.archive.org/web/20260916054204/https://www.w3.org/WAI/WCAG22/Understanding/reflow.html",
        "timestamp": "20260916054204"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "composes_with",
      "condition": "主从布局的列表与详情作为其中两个面板参与栏数重组",
      "reason": "自适应多面板布局只定义这组面板如何随尺寸合并为单栏或拆分为多栏,并不改变主从布局中列表选择驱动详情内容的语义。",
      "basis": "editorial"
    },
    {
      "target": "supporting-pane",
      "kind": "composes_with",
      "condition": "辅助面板作为窄屏下需要收起的额外一栏参与重组",
      "reason": "自适应多面板布局负责让辅助面板在窄屏时收起为可达入口,而面板内呈现的参考或来源内容仍由辅助面板布局定义。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "related",
      "condition": "决定窄屏或极窄容器下最终收敛到几栏",
      "reason": "单列布局本身只描述单栏体验;自适应多面板布局描述从多栏收敛到单栏这一变化过程,其窄屏终态往往就是单列布局。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "视口或容器宽度收窄到无法并排显示当前的栏数",
      "instruction": "必须将内容重排到等效于320 CSS像素宽度下可用、且不需要双向滚动的版式(仅内容本身因二维布局才有意义的部分除外)。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "重组前的任一面板中存在用户仍需触达的内容或操作",
      "instruction": "合并或收起栏数时,不得让该面板的内容或入口在新版式下完全不可达,必须保留可点击、有文字或无障碍名称的导航或展开入口。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "面板栏数因断点变化而改变,例如宽屏三栏收为两栏或单栏",
      "instruction": "建议保留用户当前的选择状态与滚动位置,而不是把视图重置到初始状态。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "three-pane",
      "two-pane",
      "single-pane"
    ],
    "a11y": [
      "栏数变化时不打断当前的焦点顺序,变化前聚焦的元素在新版式下仍可通过键盘到达",
      "收起后的导航入口(如返回按钮或标签)有文字或无障碍名称,不能只依赖图标",
      "收窄到单栏时,阅读顺序与视觉顺序保持一致,且不出现残留的横向滚动"
    ],
    "motion": "栏数切换可使用短促过渡,并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本;插图为编辑示意。落地到产品时仍须验证:断点处的合并与拆分是否符合等效320 CSS像素宽度下不出现双向滚动的要求、收起后的面板入口是否有文字或无障碍名称、栏数变化时当前选择与滚动位置是否被保留,以及可调整宽度窗口或分屏等中间尺寸下的过渡是否流畅而非生硬跳变。",
  "image": {
    "src": "/images/adaptive-multipane.webp",
    "alt": "一个虚构的FIELDNOTES应用界面,从左到右并排展示同一屏幕在三种宽度下的版式:最左侧较宽的版式显示三栏内容,中间的版式收作两栏,最右侧最窄的版式只剩一栏并带有一个返回箭头图标;整体为暖色调的扁平插画风格。"
  },
  "searchTerms": [
    "responsive layout",
    "breakpoint",
    "pane reflow",
    "narrow-screen adaptation",
    "cross-device consistency"
  ]
}