Material Design基础 - 响应式布局网格
1. 响应式布局网格
Material Design的响应式布局网格可根据屏幕大小和方向进行调整，确保布局的一致性。
1.1. Columns, gutters, and margins
响应式布局网格由三个元素组成：Columns, gutters, 和 margins。
1.2. Columns
内容放置在屏幕上包含列的区域。
在响应式布局中，列宽是用百分比定义的，而不是固定值。这允许内容适应任何屏幕大小。网格中显示的列数由 分界点范围决定， 分界点范围是一个预先确定的屏幕大小范围。 分界点可以与手机、平板电脑或其他屏幕类型相对应。
1.3. gutters
gutters是帮助分隔内容的列之间的空间。
gutters宽度是根据 分界点范围的变化的固定值。为了更好地适应给定的屏幕大小，gutters宽度可以在不同的屏幕宽度范围改变。
较宽的gutter更适合更大的屏幕，因为它们在column之间创造了更多的开放空间。
1.4. Margins
Margins是内容与屏幕左右边缘之间的空间。
在每个 分界点范围使用固定值或缩放值定义边距宽度。为了更好地适应屏幕，边距宽度可以在不同的 分界点处改变。更宽的边距更适合更大的屏幕，因为它们会在内容周围产生更多的空白。
1.5. Grid customization
布局网格可以调整，以满足产品和多种设备尺寸的需要。
1.6. Customizing gutters
可以调整gutters，以在布局的column之间创建更多或更少的空间。
1.7. Horizontal grids
可以为水平滚动的触摸屏用户界面定制材质设计布局网格。柱、水槽和边距是从左到右而不是从上到下布置的。屏幕的高度决定了水平网格中的列数。
在非触摸和web平台上，水平滚动的UI并不常见。
水平网格的位置可以适应不同的高度，在顶部为应用程序栏或其他UI区域留出空间。
1.8. 分界点
分界点是由特定布局要求确定的屏幕大小阈值。在给定的分界点范围内，布局会根据屏幕大小和方向进行调整。
material设计提供了基于4列、8列和12列网格的响应性布局，可用于不同的屏幕、设备和方向。
每个分界点范围确定列数，以及每个显示大小的建议边距和gutters。
1.9. 分界点系统
响应式布局网格主要用于组织布局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区域可以保持最大宽度，而边距可以再次水平缩放。
2. Material Design 系列文章
最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design
3. 参考文档
Material Design基础 - 响应式布局网格