Material Design基础 - 响应式布局网格

响应式布局网格

Material Design的响应式布局网格可根据屏幕大小和方向进行调整，确保布局的一致性。

Columns, gutters, and margins

响应式布局网格由三个元素组成：Columns, gutters, 和 margins。

Columns

内容放置在屏幕上包含列的区域。

在响应式布局中，列宽是用百分比定义的，而不是固定值。这允许内容适应任何屏幕大小。网格中显示的列数由 分界点范围决定， 分界点范围是一个预先确定的屏幕大小范围。 分界点可以与手机、平板电脑或其他屏幕类型相对应。

gutters

gutters是帮助分隔内容的列之间的空间。
gutters宽度是根据 分界点范围的变化的固定值。为了更好地适应给定的屏幕大小，gutters宽度可以在不同的屏幕宽度范围改变。
较宽的gutter更适合更大的屏幕，因为它们在column之间创造了更多的开放空间。

Margins

Margins是内容与屏幕左右边缘之间的空间。
在每个 分界点范围使用固定值或缩放值定义边距宽度。为了更好地适应屏幕，边距宽度可以在不同的 分界点处改变。更宽的边距更适合更大的屏幕，因为它们会在内容周围产生更多的空白。

Grid customization

布局网格可以调整，以满足产品和多种设备尺寸的需要。

Customizing gutters

可以调整gutters，以在布局的column之间创建更多或更少的空间。

Horizontal grids

可以为水平滚动的触摸屏用户界面定制材质设计布局网格。柱、水槽和边距是从左到右而不是从上到下布置的。屏幕的高度决定了水平网格中的列数。
在非触摸和web平台上，水平滚动的UI并不常见。

水平网格的位置可以适应不同的高度，在顶部为应用程序栏或其他UI区域留出空间。

分界点

分界点是由特定布局要求确定的屏幕大小阈值。在给定的分界点范围内，布局会根据屏幕大小和方向进行调整。
material设计提供了基于4列、8列和12列网格的响应性布局，可用于不同的屏幕、设备和方向。
每个分界点范围确定列数，以及每个显示大小的建议边距和gutters。

分界点系统

响应式布局网格主要用于组织布局Body区域中的内容和组件。Understanding layout中详细介绍了布局区域。根据不同的屏幕大小或方向缩放布局时，响应网格会调整边距和主体宽度以及布局中的列数。

Screen size	Margin	Body	Layout columns
Extra-small (phone)
0-599dp	16dp	Scaling	4
Small (tablet)
600-904	32dp	Scaling	8
905-1239	Scaling	840dp	12
Medium (laptop)
1240-1439	200dp	Scaling	12
Large (desktop)
1440+	Scaling	1040	12

在Extra-small breakpoint中，边距的基线值为16dp。身体对尺寸的增加仍有反应。当到达下一个更大的断点（600dp宽）时，glutter增加到32dp。
当机身宽度达到840dp时，边缘变得灵活，最大边缘宽度增加到200dp。达到最大宽度后，body区域再次变得灵敏，继续水平缩放。在较大的断点处，body区域可以保持最大宽度，而边距可以再次水平缩放。

参考文档

Material System - responsive layout grid