响应式 UI

断点

为了获得最佳用户体验，Material Design 应该为以下断点适配布局：480、600、840、960、1280、1440、以及 1600dp。

通过这款工具预览 Material Design 在桌面、手机和平板上的断点。

1. 布局中的摘要和详细信息视图

2. 最大屏幕宽度

布局宽度超过 1600dp 时，可以让布局宽度一直增加，直到达到最大宽度。此时，网格可以执行以下的某一项：

断点系统

这些断点描述了不同屏幕、设备和方向下，列和宽度的规范。

对于某些尺寸，即使设备发生旋转，值也保持不变。因此，任一方向上的最小宽度是定义值。

* 设备的最小宽度 <600 时为 16dp

** 桌面端的断点比列表中的值小 16dp，以适应浏览器界面（chrome）的差异。

Material Design 的响应式 UI 基于 12 列网格布局。此网格系统既能保证不同布局间的视觉一致性，又能灵活适应多种设计宽度。网格列的数量取决于断点系统。

此动画展示了界面和面板是如何与 12 列网格对齐的。

响应式网格更注重一致的外边距和间距宽度，而不是列宽。Material Design 的外边距和列都遵循 8dp 的基准网格。外边距和间距可以是 8、16、24、或 40dp。

外边距和间距不需要相等。例如，可以在同一布局中使用 40dp 的外边距和 24dp 的间距。

此动画展示了下列外边距和间距宽度的变化：

全宽网格使用流式列和断点来确定何时需要更改布局。

居中网格使用固定列，并在所有列（加上确切的外边距）不再适配屏幕时重新排列布局。

根据导航模式的定义，侧边导航可以是固定的、常驻的、或临时的。这些行为适用于任何面板，不仅限于侧边导航。

固定的

固定面板存在于响应式网格之外。面板出现在明确的断点处（当屏幕可容纳面板时）并挤压内容。面板中没有显示/隐藏面板的控件。

固定面板对响应式网格的影响

侧面板对网格的影响

此动画展示了两种状态：

常驻面板对响应式网格的影响

临时遮盖

临时面板在屏幕外时，不会影响网格或内容。当面板切换为可见时，可以通过触摸面板外部区域、或者面板内部项目再次隐藏面板。

临时面板对响应式网格的影响

当屏幕大小改变时，UI 会使用下列表面特定的行为来适配屏幕。

可见性

行为	定义
固定的	当有屏幕空间可用时，表面始终可见。
常驻的	表面的可见性可以在可见和隐藏之间切换。当表面可见时，与屏幕上的其他元素交互不会改变其可见性。
临时的	表面的可见性可以在可见和隐藏之间切换。当表面可见时，与屏幕上的其他元素交互，会将该表面切换为隐藏或最小化。

宽度

行为	定义
固定	当屏幕宽度变化时，元素宽度保持不变。
流式	元素宽度会随着屏幕大小变化而增长。
粘附	元素宽度是固定的，直到受到其他元素或断点的影响。
挤压	元素的宽度随着面板的出现而收缩。
推出	元素宽度保持不变，其位置随着面板的出现而水平变化，且可能被屏幕边缘部分遮挡。
遮盖	面板出现遮盖内容时，元素的宽度和位置始终保持不变。

描述术语