自适应 UI

为了最优的用户体验，Material 用户界面应该适应如下断点宽度的布局：480、600、840、960、1280、1440 以及 1600 dp。

1.布局中的总结和细节显示内容

2.最大屏幕宽度

超过 1600 dp 宽度的布局可以变大直到最大宽度。目前，网格可以实现下列事情中的一种：

断点系统

这些断点为不同的屏幕、设备以及方向描述了列和宽度规格。

对于某些尺寸，即使设备旋转了值也是不变的。出于这个原因，无论哪个方向的最小宽度都是定值。

*当设备屏幕小于 600 时，最小宽度为 16 dp

**低于所列值时，桌面断点设为 16 dp 来适应谷歌浏览器中的变化。

Material design 的自适应 UI 是基于一个 12 列的栏栅布局。这个栏栅提供了不同布局之间的视觉一致性，而又保持了多样化设计的灵活性。栏栅列的数量基于系统断点而变化。

这个动画效果展示了不同平面和面板是如何排列在一起从而影响上述 12 列栏栅的。

外边距与间隔没必要相等。例如，在同一个布局中使用 40 dp 的外边距和 24 dp 的间隔是完全可取的。

这个动画显示了下面这些宽度的外边距和间隔的不同搭配：

完全宽度栏栅使用流体列以及断点来决定一个布局是否需要变化。

居中栏栅使用固定列，当所有列（加上一个固定的外边距）不再适应屏幕，将会重绘布局。

如导航模式中定义的，侧边导航可能是永久、持续或者暂时的。这些行为适用于任何面板，不仅仅是侧边导航。

一个永久的面板存在于自适应栏栅的外面。面板以一个固定的断点显示（当屏幕可以容纳面板）并且排布内容。不存在显示、隐藏面板的控制。

一个永久面板对于自适应栏栅的影响。

这个动画有两个阶段：

一个持续面板对自适应栏栅的影响。

临时面板在不显示时，不会影响栏栅和内容。当被切换到可视时，可以通过点击面板之外的任何地方或者面板内的一个条目来隐藏面板。

临时面板对自适应栏栅的影响。

当屏幕尺寸变化时，UI 采用下面指定的表面行为来适应。

宽度

描述

当更多的屏幕空间可用时，下面的模式可以被应用。

展现隐藏的 UI。

例如一个侧边导航元素可以变得可视。

UI 可以从一种形式转换为另一种。

侧边导航可以转换为 tab。

分隔之前被放置于新建空间的 UI。

空间允许的话，侧边导航、总结内容以及细节内容在同一个页面中被分隔开。

在允许的空间中重绘 UI。

通过边上元素的多样结合，元素可以从单列形式重绘为充满内容空间。

内容卡片可以扩展以占据更多的水平空间。