响应式设计技术

重新放置

可以更改 UI 元素的位置和放置方式，充分利用窗口大小。 在以下示例中，较小的窗口以垂直方式堆叠元素。 当应用转换为较大的窗口时，元素可以利用的窗口宽度更宽。

在此照片应用的示例设计中，照片应用在较大的屏幕上重新放置其内容。

调整大小

可以调整 UI 元素的边距和大小，针对窗口大小进行优化。 例如，只需增大内容框架即可改善较大屏幕上的阅读体验。

重新排列

通过根据设备和方向更改 UI 元素的排列，你的应用可以以最佳方式呈现内容。 例如，在改用更大的屏幕时，可以添加列、使用更大的容器，或以不同的方式生成列表项。
以下示例显示如何在较大屏幕上重新排列较小屏幕上的单列垂直滚动内容，以显示两列文本。

显示/隐藏
你可以基于屏幕空间显示或隐藏 UI 元素，或在设备支持附加功能、特定情况或首选屏幕方向时显示或隐藏 UI。

例如，媒体播放器控件的按钮集在较小屏幕上折叠，在较大屏幕上展开。 例如，与较小窗口相比，较大窗口中的媒体播放器可以处理的屏幕上的功能要多得多。
显示或隐藏技术的一部分包括选择何时显示多个元数据。 使用较小窗口时，最好是显示最少量的元数据。 使用较大窗口时，可以显示大量元数据。 以下示例介绍了何时显示或隐藏元数据：
在电子邮件应用中，你可以显示用户的头像。
在音乐应用中，你可以显示有关专辑或歌手的详细信息。
在视频应用中，你可以显示有关电影或节目的详细信息，例如显示演职人员详细信息。
在任一应用中，都可以使各列分解并显示更多详细信息。
在任一应用中，都可以获取垂直堆叠的内容并使之以水平方式布局。 当从手机或平板手机转至较大型设备时，堆叠的列表项可以更改为显示多行列表项和多列元数据。

Replace

使用这种技术，可以针对特定断点来切换用户界面。 在此示例中，瞬态 UI（导航窗格及其精简版）适用于较小的屏幕，但在较大屏幕上，最好选择使用选项卡。

重新构建

可以折叠或拆分应用的体系结构，以更好地适应特定设备。 在此示例中，展开窗口时会显示整个列表/细节模式。