在现代化跨端产品体系中，设计师不仅需要交付 iPhone 移动端视图，还需同步兼顾 iPad 平板端、MacBook 笔记本端以及 24 英寸桌面超宽显示器。如果针对每个断点均从零手工复制一份静态图层，不仅产出效率极低，而且当产品逻辑迭代时极易产生跨端设计脱节。

掌握 Figma Auto Layout 的容器尺寸流转模型（Sizing Model），配合灵活的层级嵌套与断点约束，即可构建出一套“随意横向拉伸画板宽度，内部所有布局自动丝滑响应适配”的工业级自适应框架。本文将以响应式仪表盘（Dashboard）为例，详细拆解全响应式容器的架构法则。

---

1. 响应式布局底层三大约束模式

在 Auto Layout 容器与其子图层之间，宽度（Width）与高度（Height）存在三种核心行为状态，它们是构建一切响应式弹性的积木：

┌────────────────────────────────────────────────────────┐
│ Hug contents (紧贴内容)                                │
│ 容器尺寸由内部子元素的总和完全决定，如同收缩塑料薄膜   │
└────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────┐
│ Fixed width / height (固定尺寸)                        │
│ 容器尺寸固定为明确的物理值 (如 320px)，不受内外影响    │
└────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────┐
│ Fill container (撑满父级容器)                          │
│ 容器尺寸自动伸展至父级剩余的可用空间，吸收所有弹性伸缩  │
└────────────────────────────────────────────────────────┘

响应式传递黄金法则 (The Golden Rule)

如果希望最深层的图层响应最外层画板的拉伸，从最外层画板到最深层子图层之间的整条嵌套链路，宽度必须全部设置为 Fill container，不可在中间节点断流为 Fixed 或 Hug。

---

2. 经典响应式 Web 页面容器分层架构

一个生产级响应式页面通常分为四层标准嵌套：

[Screen Root Frame: 1440px / 390px]
  └── [Page Wrapper: Fill Container / Max-width: 1440px]
        ├── [Header Section: Fill Container]
        ├── [Main Layout: Fill Container (Desktop 横排 / Mobile 竖排)]
        │     ├── [Sidebar Navigation: Fixed 240px / Hidden on Mobile]
        │     └── [Content Area: Fill Container]
        │           ├── [Metrics Grid: Fill Container (Auto Wrap)]
        │           └── [Data Table Card: Fill Container]
        └── [Footer Section: Fill Container]

关键节点配置详解

1. Page Wrapper（页面总包裹容器）：
   • 宽度：Fill container
   • 最大宽度约束：Add max width: 1440px。
   • 对齐方式：居中对齐（Center）。
   • 作用：当用户在 2560px 4K 超宽显示器上打开页面时，内容区域不会被无限拉伸成狭长的一根细带，而是优雅地收拢在中央 1440px 黄金视口内。
2. Main Layout（主工作区）：
   • 桌面端：横向排版（Horizontal layout）。
   • 左侧侧边栏（Sidebar）：宽度设置为 Fixed: 240px（保持导航菜单宽度恒定）。
   • 右侧内容区（Content Area）：宽度设置为 Fill container（自动吸收窗口拉伸带来的所有额外宽度）。

---

3. 实战：构建自适应多端指标卡片网格 (Metrics Cards)

指标看板通常包含 4 张核心 KPI 卡片（如“总营收”、“活跃用户数”、“订单转化率”、“净推荐值”）。

3.1 单张卡片组件配置

1. 绘制单张卡片 Frame，添加内边距 Padding: 20，背景色填充为纯白，圆角 Radius: 12。
2. 卡片内部包含：顶部标题行（水平自动布局，Fill container，包含标题文本与右侧小图标）、中央巨幅数值（36px 粗体）、底部趋势对比（百分比标签）。
3. 将卡片的横向尺寸设置为 Fill container。
4. 核心秘诀：为卡片设置最小宽度约束：Add min width: 240px。

3.2 卡片容器容器组网

1. 选中这 4 张卡片，按下 ⇧ + A 编为一个外层容器。
2. 将外层容器的布局方向设为 Wrap（自动换行）。
3. 容器宽度设为 Fill container，卡片间距 Gap: 16。

3.3 跨视口响应式表现验证

• 当视口宽度为 1440px (Desktop)： 内容区足够充裕，4 张卡片并排成一行，平分当前内容区宽度。
• 当拖动画板收缩至 960px (iPad 平板横屏)： 放不下 4 张且由于卡片有最小 240px 限制，卡片自动且平滑地折行为 2 × 2 布局！
• 当拖动画板至 390px (iPhone 移动端)： 卡片进一步自动折行为 1 列纵向垂直堆叠，完全自适应充满手机屏宽！

全过程无需编写第二套组件，仅依赖 Auto Layout 的数学几何逻辑即达成了工业级自适应。

---

4. 移动端与桌面端的无缝断点切换规范

在 Figma 中，目前虽然无法直接编写 CSS @media (max-width: 768px) 查询，但可以通过以下方法建立清晰的响应式交付规格：

视口类型	推荐画板基准宽度	侧边栏策略	网格卡片列数	页面左右内边距
Desktop 大屏	1440 pt	固定展开 240 pt	4 列并排	32 pt
Tablet 平板	834 pt	折叠为图标模式 64 pt	2 列网格	24 pt
Mobile 手机	393 pt	隐藏至汉堡抽屉菜单 (Drawer)	1 列通栏	16 pt

在交付研发时，将上述三种状态以“响应式容器拉伸动图”或并列三联画板形式呈现，配合 Dev Mode 标注，研发工程师可以清晰理解各容器的弹性规则与断点逻辑，彻底告别像素级反复扯皮。