回應式中斷點

瞭解如何為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]"）