响应式布局 responsive-layout

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：
创作

创建对象：

用户

AEM 让您能够使用 布局容器 组件为页面实现响应式布局。

由此提供的段落系统让您能够将组件放置在响应式网格内。此网格可以根据设备/窗口大小和格式重新安排布局。此组件可与布局模式配合使用，让您能够根据设备创建和编辑响应式布局。

布局容器：

提供水平对齐网格功能，还可以将组件并排放入网格，并且定义它们何时应该折叠/重排。
使用预定义的断点（例如，适用于手机、平板电脑等的断点）可以定义相关设备/方向所需的内容行为。
- 例如，您可以自定义组件的大小，或者在特定设备上是否可以看到组件。
可以进行嵌套，从而允许使用列控件。

然后，用户可以使用模拟器查看内容在特定设备上的呈现方式。

AEM 使用一组机制为页面实现响应式布局：

布局容器 组件

此组件在组件浏览器中可用，而且提供了一个网格段落系统，让您能够在响应式网格内添加和放置组件。您也可以将此组件设置为页面上的默认段落系统。
布局模式

在将布局容器放置到页面上后，就可以使用布局模式在响应式网格内放置内容。
模拟器
这让您创建和编辑响应式网站，通过以交互的方式调整组件大小，根据设备/窗口大小重新排列布局。随后，用户可以使用模拟器查看内容的呈现方式。

通过这些响应式网格机制，您可以：

根据设备宽度（与设备类型和方向有关），使用断点来定义不同的内容布局。
使用这些相同的断点和内容布局来确保您的内容可对桌面浏览器窗口的大小做出响应。
使用水平对齐网格功能，从而允许您将组件放入网格中，根据需要调整大小，定义它们何时应该折叠/重排成并排或上下放置的形式。
为特定设备布局隐藏组件。
实现列控件。

根据您的项目，可以将布局容器用作页面的默认段落系统，或用作可通过组件浏览器添加到页面中的组件（或同时用作两者）。

TIP

Adobe提供了响应式布局的GitHub文档，前端开发人员可以参考该文档，以便在AEM之外使用AEM网格，例如，在为将来的AEM站点创建静态HTML模型时。

NOTE

通过对模板进行配置，可以启用上述机制。有关详细信息，请参阅文档配置响应式布局。

布局定义、设备模拟和断点 layout-definitions-device-emulation-and-breakpoints

在创建网站内容时，您可能希望确保内容的显示方式适合用来查看内容的设备。

AEM 让您根据设备的宽度定义布局：

模拟器让您能够在各种设备上模拟这些布局。除设备类型以外，通过 旋转设备 选项选择的方向也可能会因宽度的改变而影响所选的断点。
断点是区分各种布局定义的分界点。
- 断点可有效地定义任何使用特定布局的设备的最大宽度（以像素为单位）。
- 断点通常适用于一系列选定的设备，具体视设备显示器的宽度而定。
- 断点的范围会向左扩展，直至到达下一个断点。
- 您无法明确地选择断点，选择设备和方向将会自动选择相应的断点。

桌面设备没有特定的宽度，因此它与默认的断点（即，高于上次所配置断点的所有断点）有关。

NOTE

尽管可以为每台单独的设备定义断点，但这会大大增加定义和维护布局所需的工作量。

在使用模拟器时，您可以选择特定的设备以进行模拟并对布局进行定义，并且相关的断点也会突出显示。您对布局进行的任何更改都适用于应用这些断点的其他设备。也就是说，位于活动断点标记左侧、下一个断点标记之前的任何设备。

例如，当您选择 iPhone 6 Plus 设备（定义为宽度 540 像素）进行模拟和布局时，断点手机（定义为 768 像素）也会被激活。您对 iPhone 6 所做的任何布局更改均适用于手机断点下的其他设备，如 iPhone 5（定义为 320 像素）。

模拟器

选择要模拟的设备 selecting-a-device-to-emulate

打开需要编辑的页面。例如：

http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html
从顶部工具栏中选择 模拟器 图标：
此时将打开模拟器工具栏。

模拟器工具栏会显示其他布局选项：
- 旋转设备 — 允许您将设备从垂直（纵向）方向旋转到水平（横向）方向，反之亦然。
- 选择设备 - 从列表中定义要模拟的特定设备（请参阅下一步以了解详细信息）。
要选择特定设备进行模拟，您可以使用下列任一方法：
- 使用“选择设备”图标并从下拉选择器中进行选择。
- 在模拟器工具栏中选择设备指示器。
选择特定设备后，您可以：
- 查看选定设备的活动标记，如 iPad。
- 查看相应断点的活动标记，如 平板电脑。
- 蓝色虚线表示选定设备（此处为横向显示的 iPhone 6 Plus）的折页。
- 折页可被视为内容的分页符（不要与断点相混淆）。为方便起见，在滚动之前，会显示该屏幕以显示在设备上的内容部分。
- 如果所模拟的设备的高度高于屏幕大小，则不会显示折线线。
- 显示折页是为了方便作者查看，在已发布的页面上则不会显示折页。

添加布局容器及其内容（编辑模式） adding-a-layout-container-and-its-content-edit-mode

布局容器 是一个段落系统，该系统：

包含其他组件。
可定义布局。
可对更改做出响应。

NOTE

如果布局容器尚不可用，则必须为段落系统/页面显式激活 布局容器。

布局 容器在组件浏览器中 ，可作为标准组件使用。从此处，您可以将其拖动到页面上的所需位置，之后您可以看到 将组件拖动到此处 占位符。
接下来，您可以向布局容器中添加组件。这些组件将存放实际的内容：

选择布局容器并对其执行操作（编辑模式） selecting-and-taking-action-on-a-layout-container-edit-mode

与其他组件一样，您可以先选择布局容器，然后再对其执行剪切、复制、删除等操作（在编辑模式下）：

CAUTION

由于布局容器是段落系统，因此删除该组件即意味着同时删除布局网格以及容器中包含的所有组件（及其内容）。

如果将鼠标悬停在栅格占位符上或选取该占位符，则会显示动作菜单。

您需要选择父项选项。
如果嵌套了布局组件，则选择父项选项会显示一个下拉选择框，以便您选择嵌套的布局容器或其父项。

当您将鼠标悬停在下拉菜单中的容器名称上时，页面上会显示它们的轮廓。
- 级别最低的嵌套布局容器会显示蓝色轮廓。
- 后续的每个容器都会以较浅的蓝色以阴影显示。
此时会突出显示整个网格及其内容。在显示的操作工具栏中，您可以选择一项操作，例如 删除。

定义布局（布局模式） defining-layouts-layout-mode

NOTE

您可以为每个断点定义单独的布局（由模拟的设备类型和方向决定）。

要为通过布局容器实施的响应式网格配置布局，您需要使用布局模式。

可以通过两种方式启动布局模式。

使用工具栏中的模式菜单并选择布局模式
- 像切换到编辑模式或定位模式一样，选择布局模式。
- 布局模式会一直保持下去，直到您通过模式选择器选择其他模式后，才会离开布局模式。
在编辑单个组件时。
- 使用组件快速操作菜单中的布局选项，您可以切换到布局模式。
- 在编辑组件期间将一直处于布局模式，在焦点转到其他组件后，才会还原至编辑模式。