Material Design 之 响应式UI

响应式UI

Material Design 中的响应式布局可以适配任何尺寸的屏幕。

- 断点

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

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

• 布局宽度小于 600dp 时，可以使用单级的内容层次（可以是摘要或详细信息，但两者不能同时显示）填满屏幕。
• 布局宽度超过 600dp 时，可以同时放置两级内容层次（可以同时显示摘要和详细信息）。

2. 最大屏幕宽度

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

• 变成居中对齐，在内容区域两侧增加外边距；
• 保持左对齐，同时不断增加内容右侧外边距；
• 内容宽度继续增加，同时展示出更多额外的内容。

断点系统：

断点（dp）	手机 / 平板纵向	手机 / 平板横向	窗口	列数	间隔
0	小尺寸手机		xsmall	4	16
360	中尺寸手机		xsmall	4	16
400	大尺寸手机		xsmall	4	16
480	大尺寸手机