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

啟用網站的版面模式 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，這些需要包含在您的專案中。

您也需要建立 用戶庫 提供其他設定和函式呼叫。 以下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

您可以設定配置容器的每個特定例項可用的欄數：