响应式断点

了解如何为AEM响应式页面编辑器配置新的响应式断点。

创建CSS断点

首先，在AEM响应式网格CSS中创建响应式AEM站点所遵循的媒体断点。

在/ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less文件中，创建要与移动设备模拟器一起使用的断点。 记下每个断点的max-width，因为这会将CSS断点映射到AEM响应式页面编辑器断点。

自定义模板的断点

打开ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml文件并使用新断点节点定义更新cq:responsive/breakpoints。 每个CSS断点应在breakpoints下有一个对应的节点，其width属性设置为CSS断点的max-width。

创建模拟器

必须定义AEM模拟器，以允许作者在页面编辑器中选择要编辑的响应式视图。

在/ui.apps/src/main/content/jcr_root/apps/<app name>/emulators下创建模拟器节点

例如，/ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape。将引用模拟器节点从CRXDE Lite中的/libs/wcm/mobile/components/emulators复制到并更新该副本以加快节点定义。

创建设备组

将模拟器分组以使其在AEM页面编辑器中可用。

在/ui.apps/src/main/content/jcr_root下创建/apps/settings/mobile/groups/<name of device group>节点结构。

在/apps/settings/mobile/groups/<device group name>中创建一个.content.xml文件并定义
新模拟器使用的代码类似于以下代码：

更新模板的设备组

最后，将设备组映射回页面模板，以便可以在页面编辑器中为使用此模板创建的页面使用模拟器。

打开ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml文件并更新cq:deviceGroups属性以引用新的移动组（例如，cq:deviceGroups="[mobile/groups/customdevices]"）