干货丨Material Design 全面解析(二) 响应式栅格布局
Material Design的栅格布局是一种响应式布局方式，应用此方式设计开发的页面可适应不同的屏幕尺寸和方向，确保内容呈现的一致性。本文内容较为全面，如果你耐心看完，相信会有不小的收获。
响应式：响应式界面能够适应不同的设备界面尺寸，描述响应式界面最著名的一句话就是 Content is like water —— 如果将屏幕看作容器，那么内容就像水一样。
栅格：以规则的网格阵列来规范网页中的内容布局及信息分布，很像传统的印刷排版方式，即在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。
需要注意的是，Material Design响应式栅格布局是有断点（Breakpoints）的：
断点：指页面关键的宽度类别或宽度值，通俗点说就是因为屏幕越宽，列宽和间距就越大，为了方便计算取整，列宽和间距在屏幕达到某一些特定宽度时才会发生变化。
列（columns）：列的宽度被称为列宽，使用百分比来定义，而不是固定值，以便可以灵活地适应任何屏幕大小。网格中显示的列的数量由屏幕的断点确定，达到断点时，列数就会发生变化。
间距（gutters）：也被称为水槽 / 沟，间距同列一样，在每个断点范围内的个数是固定的，达到断点时，间距数量就会发生变化。
边距（margins）：指内容和屏幕左右边缘之间的空间。边距宽度在每个断点范围内的值是固定的，达到断点时，宽度就可以发生变化。边距的宽度通常是间距的倍数。
最小单位：是栅格的基础单位，栅格内容元素和布局规则都是基于它整数倍递增。目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，因此通常使用8px作为最小单位，如一个列的宽度是24px、80px等，可以理解为一个8px X 8px的小方格就是整个栅格的基础单位。
总宽度：栅格的总宽度，总宽度 = 列宽 x 列数+ 间距宽 x 间距数 + 边距 x 2。
列数：即页面最大宽度下的列的数量，网页端常用12列或24列，移动端通常用6列，也可以根据内容自定数量。
600dp：
布局宽度小于600dp时，可以使用单级的内容层次填满屏幕（如：可以显示标题或详细信息，但两者不能同时显示）
布局宽度超过600dp时，可以同时放置两级内容层次（如：可以同时显示标题和详细信息）
1600dp：为最大屏幕宽度，当布局宽度超过1600dp时，可以让布局宽度一直增加，直到达到最大宽度。此时，栅格布局可以执行以下的某一项规则：
内容区域变成居中对齐，增加内容两侧的边距宽度
内容区域保持左对齐，同时不断增加内容右侧边距宽度
内容区域宽度继续增加，同时展示出更多额外的内容
Material Design常用断点见下图：
栅格行为：分为流体栅格和固定栅格
流体栅格：又称为弹性栅格，这种栅格的列可缩放和调整内容大小
固定栅格：使用固定大小的列，可以调整边距大小，在每个断点范围内保持界面内容不变。固定栅格的列宽和边距宽只能在指定的断点处更改
UI界面可见性：所谓可见性，就是指能否看见，元素或区域通常有三种行为：永久可见，持续可见和临时可见
永久可见：元素或区域始终可见，通常是不可重叠的区域，如导航抽屉
持续可见：持续可见的区域是指可以随时根据命令显示的区域，它们可以被打开或关闭。当它们出现时，它们会压缩其他内容和栅格
临时可见：临时可见的区域是指暂时出现的区域，出现时，它们不会影响栅格。当它们可见时，可以通过点击其区域中的项目或其区域外的任意位置来隐藏它们，此时界面中的其他元素和区域是不可点击的
响应式模式：随着屏幕尺寸和空间的增加，可以应用以下响应模式，并加以流畅的动效，创造良好的用户体验：
出现：在小屏幕中隐藏的 UI 元素，随着屏幕可用空间的增加就会出现，如侧边栏这样的元素会随着屏幕变宽而变得可见；一些原本隐藏的 UI 功能会全部显现；文字内容会增加等，见下图：
变形：一个 UI 元素可以从一种格式变形成另一种格式，如侧边栏导航可能变形成Tab选项卡；列表可能变形成网格列表；菜单可能变形成工具栏中的图标等，见下图：
分隔：一个图层的 UI 可能会被划分到新的可用空间中，如侧边导航、列表内容和列表每一项的详细内容被分隔以填满整个视图，见下图：
重排：UI 可以在变宽的屏幕中被重新排布，见下图：
位移：UI 组件可以被移动到更合适的位置，见下图：
栅格应用准则：这里介绍一些栅格布局基本的应用准则和技巧，但要明白在实际设计中其实没有任何硬性的规定，还要结合页面自身的特点进行应用：
内容元素位于若干列上：内容排布在列上，并在列宽以内，内容边缘不能出现在间距上，但有时如果我们把内容都按照列宽排布，视觉效果可能会不太好，最佳的处理方式是将整个元素放在一个不可见的，更大的容器内，再将容器排布在列上。见下图：
只要父级元素对齐栅格，子级元素不必完全对齐：有时设计内容一半是图片，一半是文字，图片和文字没有完全落在一列上，其实不用担心，只要父级容器对齐栅格列宽即可，见下图：
除非有意，否则不要把列作为边距的一部分：所有重要内容都应该与栅格列宽相适应，不要将列宽当成留白或边距的一部分，而是要利用列外的部分当作留白区域，以方便代码的实现（所以如果需要一个1200px宽的页面，这并不意味着你的设计就是1200px宽，而是说设计内容宽度在1200px的画布内，实际内容占位可能是960px，这样就会有空间留出外边距和留白区域），见下图：
完全出血的元素、纹理或图形应该设计在画布边缘，作为出血的列：如下图的顶部图片被设计成完全出血：
Material Design的体系和逻辑目前已经发展的非常完善，有很多内容值得思考和研究。关于Material Design更多详细内容，会在日后为大家推送，欢迎关注。