Material Design响应式布局栅格可以适应屏幕尺寸和方向，确保布局的一致性。
列、间距和边距
Material Design布局由三个元素组成：列、间距和边距。
列
内容放置在包含列的屏幕区域中。
列宽是使用百分比而不是固定值来定义的，允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围（预定屏幕大小的范围）确定，无论是移动设备，平板电脑还是其他尺寸的断点。
间距
间距就是列之间的空间。它们有助于分离内容。
间距在每个断点范围内的值是固定的。为了更好地适应屏幕，间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕，因为它们在列之间创建了更多的空白。
边距
边距是内容和屏幕左右边缘之间的宽度。
边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕，因为它们在内容的周边创建了更多的空白。
自定义栅格
可以调整布局以满足您的产品和各种设备尺寸的需求。
自定义间距
可以调整间距以在布局的列之间创建更多或更少的空间。
自定义栅格
可以调整页边距，以在内容和屏幕边缘之间创建或多或少的空间。页边距在每个断点使用固定值。
正文副本可读性的理想长度是每行40-60个字符。
间距和边距
在同一断点内，间距和边距宽度可以彼此不同。
水平栅格
Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列，而不是从上到下排列。屏幕的高度决定水平栅格中的列数。
在非触控和web平台，水平滚动的UI不常见。
可以定位水平栅格以适应不同的高度，从而为顶部的app栏或其他UI区域留出空间。
断点
断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内，布局将根据屏幕大小和方向进行调整。
Material Design基于以下列结构提供响应式布局。使用4列，8列和12列栅格的布局可用于不同的屏幕、设备和方向。
每个断点范围决定每个显示大小的列数、建议的边距和间距。
栅格特点
弹性栅格
弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。
固定栅格
固定栅格使用固定大小的列，具有流体边距，以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。
UI（用户界面）区域
布局由多个UI区域组成，例如侧面导航，内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致，同时适应不同屏幕尺寸的不同断点。
为了提高设备之间的熟悉度，为桌面设计的UI元素应该以与移动UI一致的方式进行组织。
永久UI区域
永久UI区域是可以在响应栅格之外显示的区域，如导航抽屉。这些地区不能重叠。
持久UI区域
持久性UI区域是可以随时根据命令显示的区域，或者它们可以保持可见。它们可以打开或关闭，出现或消失。当它们出现时，它们会压缩内容和栅格。
当持久性UI区域可见时，其可见性不受与屏幕上其他元素交互的影响。
临时UI区域
临时UI区域暂时出现，当它们出现时，它们不会影响响应式栅格。当它们可见时，可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。
当UI区域可见时，其他屏幕元素不是交互式的。
原型
原型是结构化布局，为布局、分层和阴影提供一致的方法。它们是一个起点，旨在在进行修改以满足产品的特定需求。
原文链接： https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
网友评论