可通过 ArcGIS Experience Builder 配置和创建用于 Web 体验的不同页面布局，以使这些布局能完美地适用于所有屏幕尺寸。 每个布局的配置均基于自适应设计，您可以在其中为大、中、小尺寸的屏幕创建独特的设计。 每种布局都是对体验的适配，从而能够更加灵活地进行更多应用程序自定义并更好地利用屏幕尺寸和不同的内容。
该模板专为多种屏幕尺寸而设计。 当您选择空白的全屏应用程序或空白的滚动页面模板时，将为中小屏幕设备启用自动布局。 这样可使得所有中小屏幕设备中的微件能与大屏幕设备中的微件保持同步，并自动进行排列。
要为中小屏幕设备创建单独的布局，请单击页面或窗口布局旁边的自定义按钮。 然后，可以针对选定屏幕设备手动排列微件和窗口并调整其大小。
当编辑小屏幕设备的布局时，以下原本显示在画布上的大型配置面板将显示在构建器边距中：
- “按钮”、“分隔线”和“视图导航”微件中的快速样式面板
- 动态内容面板
- “占位符”和“格网”微件中的添加微件面板
- 页面、页眉、页脚、窗口、块和格网的选择模板面板
提示：
要测试不同屏幕尺寸和设备的布局，请在构建器工具栏上单击实时视图。 借助“实时视图”，可先确认内容是否已正确调整，然后再保存并发布该内容。 您还可以调整一些设置进行尝试以及操作交互式和动态微件以了解它们的工作方式。
待定列表
要从设备布局中移除微件或屏幕组，请单击其工具栏上的移至待定列表按钮 
。 此操作会将微件或屏幕组从当前设备的画布上移除，但会保存其配置以便您在需要时，将其重新添加到布局中。 启用自定义布局选项后，任何被添加到其他设备模式的其他微件，都不会被添加到当前设备。 可以从待定列表中手动添加微件。
注：
待定列表中的微件将保存其大部分设置，其中包括所有内容设置、其自己的样式设置（例如背景和边框），以及所有操作设置。 微件不会保留样式选项卡中的整体布局设置，例如大小和位置设置。
待定列表将显示在“插入”微件面板的待定选项卡上。 应用程序中至少处于一种设备模式下的微件将显示在使用的其他设备下的列表中。 以下图标将指示具有每个微件的设备模式：
- 用于大、中屏幕设备。
- 用于大、小屏幕设备。
- 用于中、小屏幕设备。
- 用于大屏幕设备。
- 用于中屏幕设备。
- 用于小屏幕设备。
当前未在任何设备模式下的画布上的微件将显示在所有未使用的设备下。 单击删除以从待定列表中移除这些微件。
消息操作和待定列表
您移动到待定列表的微件不能作为消息操作的目标。
在微件设置的操作选项卡上添加消息操作时，待定列表中的任何微件都不会作为可用目标列出。
如果将已是消息操作目标的微件移至待定列表，则只有在将微件移至待定列表的设备模式下，才会关闭该消息操作。 图标显示在源微件设置的操作选项卡上，该选项卡指示配置和激活操作的设备模式。
在快速模式下，您只能查看当前正在查看的设备模式布局的消息操作。
提示：
要了解有关 Experience Builder 移动优化设置的更多信息，请尝试优化移动应用程序布局教程。
设计响应式布局的最佳做法
当设计您的体验布局时，请考虑以下最佳做法：
- 选择合适的布局类型。
- 如果您希望元素位置固定不变，并且不随内容大小变化而自动调整布局，则固定布局是合适的选择。 适用于仪表盘设计和模式对话框。
- 流动布局允许内容根据屏幕大小自动堆叠和平移。 最适合响应式、可滚动的内容，例如包含大量文本、图像和地图的长页面。
- 布局微件包括“行”、“列”和“格网”微件，适用于复杂的结构化布局。 其中每个微件均支持在容器中灵活地放置和对齐微件。
- 了解用于设置大小和位置的选项并策略性地应用这些选项。
- 如果需要精确大小，例如页眉、页脚以及其他必须在不同屏幕大小上保持相同大小的元素，则像素 (px) 为最佳选择。 此单位适用于桌面布局中的元素和固定大小元素。
- 如果希望高度和宽度相对于父容器进行响应式调整，则百分比 (%) 为最佳选择。 使用百分比单位可确保元素针对不同屏幕大小保持灵活适配。 此单位适用于平板电脑和手机自适应屏幕大小。
- 自动允许 Experience Builder 根据微件的内容决定其大小和位置。 适用于动态文本或图像，其中容纳内容所需的空间量可能会发生变化。 如果预期元素大小会发生变化，请使用自动。
- 拉伸可使元素完全填充其整个容器空间。 适用于背景图像、地图以及任何其他必须完全占据可用空间的内容。 对于小屏幕布局，请谨慎使用此选项。 拉伸许多微件可能导致小屏幕设备显示过载。
- 请从大屏幕布局开始，然后再处理较小的布局。
- 设置大屏幕布局后，请使用设备模式工具在中、小屏幕设备上查看该布局。
- 如果需要，请使用自定义布局选项以更改中、小屏幕设备的布局。
- 自动布局可以在不同屏幕大小间同步元素位置，但可能无法较好地处理复杂的微件排列。
- 自定义布局允许重新定位、隐藏微件，或者调整微件的大小，以使其在较小的屏幕上更易于使用。
- 保持布局一致性。
- 可以使用一致的间距和对齐方式，创造视觉上连贯的体验。
- 在布局中应用统一的字体样式、颜色以及微件填充和间隙。
- 使用页面设置中的页眉和页脚工具配置页眉和页脚，以便其在页面间的行为一致。
- 预览并测试。
- 可以使用实时视图工具在构建器中测试您的布局。
- 可以使用预览工具在浏览器窗口中预览您的应用程序。 可以调整浏览器窗口的大小以在不同的屏幕大小上预览您的应用程序。
- 在小屏幕上，确保元素不会溢出或重叠，微件可用且清晰，并且可滚动区域不会阻挡关键导航或按钮。