响应型栅格布局 - Material Design

背景

响应型栅格布局可适应屏幕尺寸和方向，确保布局的一致性。

---

构成

Material Design 的栅格布局由列（columns）、沟（gutters）和边距（margins）构成。

1. Columns
2. Gutters
3. Margins

列（columns）

内容被放置在包含列的屏幕区域中。
列宽最好使用百分比而不是固定值来定义，以允许内容灵活地适应任何屏幕大小。
网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)决定，无论是移动设备、平板电脑还是其他大小的断点。

沟（gutters）

沟是列之间的空间。它们有助于分离内容。
沟的宽度是每个断点范围内的固定值。
为了更好地适应屏幕，沟的宽度可以在不同的断点处改变。
较宽的沟更适合较大的屏幕，因为它们会在列之间产生更多的空白。

在 360 dp 的移动端上，这个沟宽度为 16dp 。

在 600 dp 的平板电脑上，这个沟宽度为 24dp 。

边距（margins）

边距是内容和屏幕两端之间的空白部分。
边距宽度定义为每个断点范围的固定值。
为了更好地适应屏幕，边距宽度可以在不同的断点处改变。
较宽的页边距更适合较大的屏幕，因为它们会在内容周围产生更多空白。

在 360 dp 的移动端上，这个边距宽度为 16 dp 。

在 600 dp 的平板电脑上，这个边距宽度为 24dp 。

---

定制栅格布局

可以调整页边距以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。

正文的理想易读长度是每行 40 - 60 个字符。

此布局网格使用小的 8 dp 边距，以允许图像在布局中占据更多空间。

此布局网格使用大的 64 dp 边距来限制内容的宽度。

在同一屏幕下，gutter 和 margin 的宽度可以不同。

1. 32dp margins
2. 8dp gutters

---

断点（Breakpoints）

断点是具有特定布局要求的预定屏幕尺寸范围。在给定的断点范围内，布局会根据屏幕大小和方向进行调整。

Material Design 使用 4 列、8 列和 12 列栅格的布局可用于不同的屏幕、设备和方向。

断点建议

iOS 下的断点

---

布局行为

流体布局（Fluid grids）

流体布局使用缩放和调整内容大小的列。
流体布局的布局可以使用断点来确定布局是否需要显著改变。

固定布局（Fixed grids）

固定布局使用固定大小的列，在每个断点范围内保持内容不变。
固定布局只能在指定的断点处改变。

---

空白框架（Whiteframes）

在设计时使用空白框架来代替具体的内容。

---

参考

https://material.io/design/layout/responsive-layout-grid.html#whiteframes