配置布局容器和布局模式 configuring-layout-container-and-layout-mode

响应式布局 是实现 响应式网页设计. 这允许用户创建布局和维度取决于用户所使用设备的网页。

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

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

配置响应式模拟器 configuring-the-responsive-emulator

此任务允许您查看响应式 模拟器 在您的网站上。

注册页面组件以进行模拟 register-your-page-components-for-emulation

要使模拟器能够支持您的页面，您必须注册页面组件。 请参阅 注册页面组件以进行模拟.

指定设备组 specify-the-device-groups

要指定在模拟器的“设备”列表中显示的设备组，请参阅 指定设备组.

将您的网站链接到指定的设备组 link-your-site-to-the-specified-device-groups

要包含模拟器，您需要将网站链接到设备组。 请参阅 添加设备列表 （适用于经典UI和触屏优化UI）。

激活网站的布局模式 activate-layout-mode-for-your-site

这些过程用于启用 布局 模式。

配置断点 configure-the-breakpoints

断点:

它们可以使用CRXDE Lite或XML进行定义。

使用CRXDE Lite配置断点 configuring-breakpoints-using-crxde-lite

使用XML配置断点 configuring-breakpoints-using-xml

断点位于 <jcr:content> 部分 .context.html 在相应的模板（或内容）文件夹下。

示例定义：

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

添加响应式信息提供程序 add-a-responsive-information-provider

复制以下内容 cq:infoProviders 在父页面组件中插入节点结构：

/libs/foundation/components/page/cq:infoProviders/responsive

为页面启用组件大小调整功能 enable-component-resizing-for-the-page

需要执行这些步骤，以便您可以在 布局 模式。

将布局容器设置为主Parsys set-layout-container-as-main-parsys

要将页面的主Parsys设置为布局容器，您需要将Parsys定义为：

wcm/foundation/components/responsivegrid

在以下任一位置：

以下两个示例说明了定义：

包含响应式CSS include-the-responsive-css

用于断点的CSS使用更少 css-for-breakpoints-using-less

AEM使用LESS生成部分必要的CSS，这些CSS需要包含在您的项目中。

您还需要创建 客户端库 以提供其他配置和函数调用。 以下LESS提取是您需要添加到项目中的最低值示例：

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

基本网格定义可在以下位置找到：

/libs/wcm/foundation/clientlibs/grid/grid_base.less

样式注意事项 styling-considerations

响应式容器中保存的组件将根据响应式网格大小调整大小(连同它们各自的HTMLDOM元素)。 因此，在这些情况下，建议避免（或更新）固定宽度（包含的）DOM元素的定义。

例如：

调整大小和自适应图像合规性 resizing-and-adaptive-image-compliance

在网格中调整组件大小的任何操作都将触发以下监听器（根据需要）：

要正确调整响应式网格中包含的自适应图像内容的大小和更新其内容，您需要添加 afterEdit 设置为 REFRESH_PAGE 侦听器 EditConfig 文件。

例如：

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

自适应图像机制通过脚本提供，该脚本控制针对窗口的当前大小选择正确图像。 在DOM准备就绪后或收到专用事件时，该活动会激活。 当前必须刷新页面才能正确反映用户操作的结果。

为页面启用布局容器组件 enable-the-layout-container-component-for-page

这些任务允许作者拖动 布局容器 组件。

启用布局容器组件以进行页面编辑 enable-the-layout-container-component-for-page-editing

要允许作者向内容页面添加更多响应式网格，您需要为页面启用布局容器组件。 您可以使用以下任一方式执行此操作：

配置布局容器的网格 configure-the-grid-of-the-layout-container

您可以配置每个布局容器特定实例可用的列数：