响应式 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 会使用下列特定的行为来适配屏幕。

可见性

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

宽度

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

描述术语