打开体验
首先，您将打开在之前教程中创建的体验。
- 如果您已完成上一教程：向 Web 应用程序添加窗口，请重新打开 American River Marine Estuary 体验并跳至下一部分。
注：
如果不知道如何查找体验，请打开 ArcGIS Experience Builder 并使用 ArcGIS 帐户登录。 您的体验将列在最近体验页面上。
- 如果没有完成前面的教程，请打开 ArcGIS Experience Builder 并登录 ArcGIS 帐户。
注：
如果您没有 ArcGIS 账户，请参阅软件访问权限选项。
出现最近体验页面。
- 单击新建按钮。
- 单击 ArcGIS Online 选项卡。
- 在搜索栏中，键入 estuary template 3。
- 在 American River Marine Estuary Template 3 卡片上，单击创建按钮。
画布随即出现，其中显示了目前为止已创建的体验。 它包括地图、页眉、包含更多微件的列以及用于打开窗口的按钮。
- 在构建工具栏上，单击标题并将其重命名为 American River Marine Estuary。
“启用自定义布局”选项
American River Marine Estuary 体验旨在用于交互式自助服务设备，因此您的设计将侧重于较大的屏幕格式。 但是，您的客户表示其还希望从其网站链接到此应用程序，因此用户也可能会在平板电脑和手机上遇到此应用程序。 您将使用自定义布局选项来调整仅在较小屏幕上可见的布局。
- 在构建器工具栏上，单击编辑页面以适应中等屏幕设备按钮。
画布随即变窄，模拟平板电脑设备的屏幕。 地图旁的列现在过窄，无法使用。 您无法阅读微件中的任何内容。
画布旁边存在 2 个状态菜单：一个用于页眉，另一个用于地图正文。 它们均设置为自动，意味着中等屏幕的布局与大屏幕的布局相同。
- 在应用程序主体旁边，单击自定义。
- 在是否确定启用窗口中，单击确定。
现在，您可以更改页面在中等屏幕上的布局设计，而不会影响大屏幕的设计。
- 单击该列。 请尝试单击两个微件之间的空间来选择该列，而非其他微件之一。
提示：
要确认您已选择列微件，请检查列窗格是否已出现。 您还可以在页面窗格的大纲部分中选择列微件。
- 将列微件的侧面控点拖动到右侧，直到其占据 4 个垂直空间，而非占据 2 个垂直空间为止。
现在，该列的宽度足以完全显示图例。 此更改将不会影响大屏幕上的体验。
将项目移至待定列表
有时，您希望从小屏幕布局中完全移除微件。 您可以将该微件移至待定列表，而非将其删除（此操作也会将其从大屏幕布局中移除）。
- 在构建器工具栏上，单击编辑页面以适应小屏幕设备按钮。
画布将变得更小。 此处所需更改更加引人注目。
- 在画布上滚动浏览该应用程序。
将首先显示该列，下方为地图。 在小屏幕上，行微件将显示为列，因此您的布局结构现在为列中的列，而非行中的列。
移动应用程序占用的空间较小，因此保持简单会更加成功。 图例和书签微件中的信息也可以在弹出窗口中找到，因此您将从小屏幕上的视图中移除这些微件。 滑动功能在小屏幕上同样不太有用，因此您也需要将其移除。 这意味着您可以移除整个列微件，仅保留地图。
- 在画布主体旁边，单击自定义。 单击确定。
- 选择列微件。 确保选择列，而非列内的微件之一。
请勿删除列微件。 在自定义模式下删除微件将从整个应用程序中将其删除，因此其在较大的屏幕上也不再可用。 请将微件移至待定列表，而非从中等屏幕或小屏幕布局中将其删除。 由此将确保其仍然存在并且适用于其他屏幕大小。
提示：
如果您意外删除了列微件，请单击工具栏上的撤消按钮。
- 在微件的工具栏上，单击移至待定列表按钮。
该列及其所有内容都将从画布中消失。 仅保留地图。
注：
如果地图未填充整个画布，请单击并稍微拖动地图以重置其大小。
如果地图工具（例如，切换地图按钮）未显示在画布底部，请打开地图窗格的样式选项卡。 对于高度，选择自定义并将大小设置为 100%。
使用像素设置大小和位置
为较小的屏幕创建自定义布局有一个缺点：如果您决定随后对布局进行更改，则必须对其进行两次到三次更改。 有时，您可以通过使用像素，而非百分比来调整事物的大小，从而避免启用自定义布局。
在小屏幕上，您体验中关于此地图按钮的空间不足，无法显示其所有文本。
您可以为仅影响小屏幕的按钮设置自定义大小，但您将需要更改按钮的常规大小，以使其适用于所有屏幕大小，并且无需进行自定义。
- 在构建器工具栏上，单击编辑页面以适应大屏幕设备按钮。
- 指向页眉，然后单击编辑页眉。 单击按钮微件。
- 在按钮 2 窗格中，单击样式选项卡。
在大小和位置下，宽度和高度设置均以屏幕大小的百分比进行测量。 这是按钮变得过短，而无法在小屏幕设备上阅读的原因。
- 在宽度旁边，单击 % 按钮并选择 px。 将高度设置的 % 也更改为 px。
使用像素来确定按钮的大小意味着无论屏幕大小如何，按钮将始终具有相同的大小。
- 对于宽度，键入 120。 对于高度，键入 30。
对于大屏幕，按钮看起来有点小；对于小屏幕，按钮仍然看起来有点大。 但是其新大小为一种折衷方案，适用于任何大小的屏幕。 您还需要确定其位置（以像素为单位）。
在高度参数下方，存在一个位置图。 该图可确定按钮距离页眉边缘的距离。
- 在位置图中的底部和右侧位置测量旁，单击 % 按钮并选择 px。
- 将两个测量均更改为 10 像素。
该按钮现在位于距页眉右下角 10 像素的位置。
接下来，您将调整标题文本的位置，使其距边缘也为 10 像素。
- 在画布上，单击标题文本。
在文本窗格样式选项卡上的位置图中，所有 4 个测量均设置为 0%。 这是因为您已将标题配置为填充整个页眉空间。 您需要调整其中一项测量。
- 在位置图中，将左侧测量值更改为 10 像素。
在画布上，文本微件将稍微向右平移。
- 单击针对中等屏幕设备编辑页面和针对小屏幕设备编辑页面按钮来测试页眉在较小屏幕上的显示方式。
- 在构建器工具栏上，单击针对大屏幕设备编辑页面按钮和保存按钮。
在本教程中，您调整了布局以适应三种屏幕大小。 您启用了自定义布局选项，将不需要的项目移至待定列表，并使用像素设置了微件的大小和位置，以确保其不会随着屏幕大小的变化而调整大小。 有关如何向公众提供体验的信息，请参阅本系列的最后一个教程：发布体验和模板。
