响应式UI相关

Material Design 中的响应式布局可以适配任何尺寸的屏幕。这个 UI 指南包括：用于确保布局一致性的弹性网格，在不同的屏幕上内容的断点细节，以及应用从小屏幕到大屏幕如何缩放的说明。

断点

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

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

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

2. 最大屏幕宽度

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

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

断点系统

不同屏幕、设备和方向下，列和宽度的规范

界面行为

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

可见性

宽度

模式

出现

• 在小屏幕中隐藏的 UI元素，随着屏幕可用空间的增加，可能会出现；
• 侧边栏这样的元素可能会变得可见；
• 一个简单的 UI 可能会出现更多强大或复杂的选项；
• 在小屏幕上，只有点击某个元素才会出现的内容，当屏幕上有更多可用空间时，可能会默认显示。

变形

-一个 UI 元素可以从一种格式变形成另一种格式；
-侧边栏导航可能变形成 Tab 选项卡；
-列表可能变形成网格列表；
-菜单可能变形成工具栏中的图标。

重排

-UI 可以重排到可用空间中;
-来自单列格式的元素可以重新排列成多种组合来填满内容区;
-水平 Tab 选项卡可以重排成垂直列表;
-元素可以基于新屏幕的比例或设备方向在组件内部重排。

扩展

-UI 可能扩展成更大的区域；
-内容卡片可以扩展来填充新的空间；
-对话框可以根据内容或特定的增量按比例扩展。

位移

-UI 组件可能会移动到更合适的位置；
-小屏幕上的底部卡片可能会作为菜单重新定位；
-浮动操作按钮（FAB）可以移动到相对其他元素更显眼的位置。

本文摘选于：
https://www.mdui.org/design/layout/responsive-ui.html