回應式設計 responsive-design

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
開發

建立對象：

管理員
開發人員

設計您的體驗，使其適應顯示它們的使用者端檢視區。透過回應式設計，相同的頁面可以有效的在兩個方向的多個裝置上顯示。下圖示範頁面回應檢視區大小變更的一些方式：

配置：對較小的檢視區使用單欄配置，對較大的檢視區使用多欄配置。
文字大小：在較大的檢視區中使用較大的文字大小（如標題）。
內容：在較小裝置上顯示時，僅包含最重要的內容。
導覽：裝置專用的工具可供存取其他頁面。
影像：根據視窗尺寸提供適合使用者端檢視區的影像轉譯。

回應式設計範例

開發可產生HTML5的Adobe Experience Manager (AEM)應用程式，以調整多個視窗大小和方向。例如，下列檢視區寬度範圍會與各種裝置型別和方向相對應

最大寬度480畫素（手機、直向）
最大寬度767畫素（手機、橫向）
介於768畫素和979畫素之間的寬度（平板電腦，縱向）
介於980畫素和1199畫素之間的寬度（平板電腦，橫向）
寬度1200px或更高（桌上型電腦）

請參閱下列主題，以取得關於實作回應式設計行為的資訊：

媒體查詢
流動格線
最適化影像

在設計時，請使用 模擬器 工具列來預覽您各種熒幕大小的頁面。

開發之前 before-you-develop

在開發支援網頁的AEM應用程式之前，您應該先做出數個設計決策。例如，您需要具備下列資訊：

您正在定位的裝置
目標檢視區大小
每個目標檢視區大小的頁面配置

應用程式結構 application-structure

典型的AEM應用程式結構支援所有回應式設計實施：

頁面元件位於/apps/<application_name>/components下方
範本位於/apps/<application_name>/templates之下

使用媒體查詢 using-media-queries

媒體查詢可讓您在頁面轉譯時選擇性使用CSS樣式。 AEM開發工具和功能可讓您在應用程式中有效率地實作媒體查詢。

W3C群組提供說明此CSS3功能與語法的媒體查詢建議。

建立CSS檔案 creating-the-css-file

在CSS檔案中，根據您鎖定目標的裝置屬性定義媒體查詢。下列實作策略可有效管理每個媒體查詢的樣式：

使用Client Library資料夾來定義轉譯頁面時組合的CSS。
在不同的CSS檔案中定義每個媒體查詢和相關樣式。使用代表媒體查詢之裝置功能的檔案名稱會很有用。
定義個別CSS檔案中所有裝置通用的樣式。
在Client Library資料夾的css.txt檔案中，依組合的CSS檔案的必要順序排列CSS檔案。

WKND教學課程使用此策略來定義網站設計中的樣式。 WKND使用的CSS檔案位於/apps/wknd/clientlibs/clientlib-grid/less/grid.less。

搭配AEM頁面使用媒體查詢 using-media-queries-with-aem-pages

WKND範例專案和AEM專案原型使用頁面核心元件，，該元件透過頁面原則包含clientlibs。

如果您自己的頁面元件並非以頁面核心元件為基礎，您也可以將使用者端程式庫資料夾包含在其的HTL或JSP指令碼中。這麼做將產生並參照CSS檔案，其中包含回應式格線運作所需的媒體查詢。

HTL htl

<sly data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}">
<sly data-sly-call="${clientlib.all @ categories='apps.weretail.all'}"/>

JSP jsp

<ui:includeClientLib categories="apps.weretail.all"/>

JSP指令碼會產生下列參考樣式表的HTML代碼：

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">