配置布局容器和布局模式 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

要包含模拟器，请将您的站点链接到设备组。 请参阅添加设备列表（对于经典用户界面和触控优化用户界面）。

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

这些过程用于在您的网站上启用​ 布局 ​模式。

配置断点 configure-the-breakpoints

断点：

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

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

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

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

示例定义：

<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

要将页面的main parsys设置为布局容器，请将parsys定义为：

wcm/foundation/components/responsivegrid

在：

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

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

使用LESS的断点的CSS css-for-breakpoints-using-less

AEM使用LESS来生成必要的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

网格中组件的任何大小调整都将相应地触发以下监听器：

要正确调整响应式网格中包含的自适应图像的大小并更新其内容，您需要将设置为REFRESH_PAGE的afterEdit侦听器添加到每个包含组件的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

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