---
title: "布局"
description: "窗口尺寸类别、间距阶梯，以及布局如何在各类别之间自适应。"
url: "https://tanrei.chnotchy.com/zh-cn/foundations/layout/"
last_updated: 2026-10-23T17:33:05.000Z
---

# 布局

> 窗口尺寸类别、间距阶梯，以及布局如何在各类别之间自适应。

## 窗口尺寸类别

Tanrei 用五个类别来描述可用宽度。它们指的是布局所在的窗口或容器，而不是某一类设备：分屏显示的平板属于 compact，展开后的折叠屏手机则不是。

| 类别 | 宽度 | 典型布局 |
| --- | --- | --- |
| Compact | 小于 600 | 单栏。导航放在底部的导航栏里，或收在菜单之后。 |
| Medium | 600–839 | 边距更宽的单栏；内容允许时可以用双栏。可以使用收起的导航抽屉（一列图标）。 |
| Expanded | 840–1199 | 双窗格，例如列表加详情。导航常驻显示。 |
| Large | 1200–1599 | 两个或三个窗格。限制文本宽度的是行长，而不是窗口。 |
| Extra-large | 1600 及以上 | 与 Large 相同，边距更宽裕；不要把内容拉伸到填满。 |

宽度采用与像素密度无关的单位：Web 上是 CSS 像素，Apple 平台上是点（pt），Android 上是 dp，Flutter 中是逻辑像素。

## 在类别之间自适应

当布局跨过某个边界时，用下面几种可预期的方式之一来改变它：

- **显现：** 把原本要点一下才能看到的窗格直接显示出来，例如在列表旁边显示详情视图。
- **拆分：** 把一栏分成两栏。
- **缩放：** 按比例调整窗格和边距的大小。
- **移位：** 移动某个元素的位置，例如把底部的导航栏移到侧边，变成收起的导航抽屉。
- **替换：** 把组件换成适合更大屏幕的对应组件，例如底部面板变成侧边面板。

三种排布方式可以覆盖大多数屏幕：在响应式网格中排列卡片的**信息流**、**列表–详情**，以及带有**辅助窗格**的内容。

## 间距

间距令牌是以 8 个单位为基准的倍数和分数。令牌名称中的数字是相对于这个基准的百分比，因此 `space100` 是 8，`space50` 是 4，`space200` 是 16。

| 令牌 | 值 | 预览 |
| --- | --- | --- |
| `--tanrei-sys-space-space0` | 0px |  |
| `--tanrei-sys-space-space25` | 2px |  |
| `--tanrei-sys-space-space50` | 4px |  |
| `--tanrei-sys-space-space75` | 6px |  |
| `--tanrei-sys-space-space100` | 8px |  |
| `--tanrei-sys-space-space125` | 10px |  |
| `--tanrei-sys-space-space150` | 12px |  |
| `--tanrei-sys-space-space175` | 14px |  |
| `--tanrei-sys-space-space200` | 16px |  |
| `--tanrei-sys-space-space250` | 20px |  |
| `--tanrei-sys-space-space300` | 24px |  |
| `--tanrei-sys-space-space400` | 32px |  |
| `--tanrei-sys-space-space450` | 36px |  |
| `--tanrei-sys-space-space500` | 40px |  |
| `--tanrei-sys-space-space600` | 48px |  |
| `--tanrei-sys-space-space700` | 56px |  |
| `--tanrei-sys-space-space800` | 64px |  |
| `--tanrei-sys-space-space900` | 72px |  |

生成自 `design/tokens/tanrei.light.tokens.json`, `tokens/sys/space.tokens.json`

较小的级别用在组件内部，中间的级别用在组件之间，较大的级别用在各个区块之间。触摸目标之间的间距绝不小于 `space100`。

## 文本宽度

连续文本每行大致保持在 45 到 80 个字符之间。在 Large 和 Extra-large 的窗口中，为文本栏设定宽度上限，多出来的空间交给边距或辅助窗格。