全新回應式：網頁設計在元件導向的世界中

在回應式網頁設計的新時代中，控管巨觀和微觀版面配置。

Una Kravets

現今的回應式設計

如今，使用「回應式設計」一詞時，您最有可能想到的是使用媒體查詢，在設計從行動裝置大小調整為平板電腦大小，再調整為桌機大小時，變更版面配置。

但很快地，這種對回應式設計的認知，可能就會像使用表格配置網頁一樣過時。

以檢視區塊為準的媒體查詢提供了一些強大工具，但缺少許多精細調整功能。無法回應使用者需求，也無法將回應式樣式注入元件本身。

您可以使用全域檢視區塊資訊設定元件樣式，但元件仍不擁有自己的樣式，而當設計系統是以元件為基礎，而非以網頁為基礎時，這種做法就無法運作。

好消息是，大環境正在改變，而且變化速度相當快。 CSS 不斷演進，回應式設計的新時代即將來臨。

我們發現這種情況大約每 10 年就會發生一次。10 年前 (2010 年至 2012 年左右)，行動裝置和回應式設計帶來巨大變革，CSS3 也應運而生。

CSS 樣式時間軸
資料來源：Web Design Museum。

因此，生態系統再次準備好迎接 CSS 的重大變革。Chrome 和網頁平台工程師正在為下一代回應式設計進行原型設計、規格制定和實作。

這些更新包括根據使用者偏好設定的媒體功能、容器查詢，以及適用於新螢幕類型 (例如摺疊式螢幕) 的媒體查詢。

可根據使用者、容器和板型規格調整

回應使用者

全新的使用者偏好媒體功能可讓您根據使用者的特定偏好設定和需求，設計符合這些條件的網頁體驗。也就是說，偏好媒體功能可讓您根據使用者的體驗調整使用者體驗。

這些使用者偏好媒體功能包括：

  • prefers-reduced-motion
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-color-scheme
  • inverted-colors
  • 其他

偏好設定功能會擷取使用者在作業系統中設定的偏好設定，協助打造更完善的個人化網路體驗，特別是針對有無障礙需求的使用者。

在作業系統中開啟無障礙偏好設定

prefers-reduced-motion

如果使用者已設定作業系統偏好設定，減少動作，則在一般使用電腦時，要求較少的動畫。因此，他們在使用網頁時，可能不會喜歡花俏的簡介畫面、卡片翻轉動畫、複雜的載入器或其他花俏動畫。

您可以運用 prefers-reduced-motion 設計網頁，同時考量減少動作，並為未設定這項偏好的使用者打造動作強化體驗。

這張卡片兩面都有資訊。基本減少動態效果的體驗是淡入淡出，顯示該資訊；動態效果增強的體驗則是卡片翻轉。

「偏好減少動態效果」不應解讀為「沒有動態效果」，因為動態效果對於在網路上傳達資訊至關重要。請提供穩定的基準體驗，引導使用者操作，避免不必要的動作，並逐步提升沒有無障礙需求或偏好的使用者體驗。

prefers-color-scheme

另一個偏好媒體功能是 prefers-color-scheme。這項功能可協助您根據使用者偏好的主題自訂 UI。使用者可以在電腦或行動裝置的作業系統中，設定偏好的淺色、深色或自動主題，系統會根據一天中的時段變更主題。

如果您使用 CSS 自訂屬性設定網頁，就能輕鬆替換顏色值。您可以快速更新顏色主題值，例如 backgroundColor 和 textOnPrimary，在媒體查詢中動態調整為新主題。

如要輕鬆測試部分偏好設定查詢，可以使用開發人員工具進行模擬，不必每次都開啟系統偏好設定。

為深色主題設計

為深色主題設計時，不只是反轉背景和文字顏色，或使用深色捲軸。有幾項考量事項可能未注意到。舉例來說，您可能需要降低深色背景的色彩飽和度，減少視覺震動。

請勿在深色主題中使用鮮豔的飽和色

您可能想在元素的背景顏色中使用光線，將元素往前拉，而不是使用陰影建立深度。這是因為陰影在深色背景上效果不佳。

Material Design 提供許多深色主題設計指南。

深色主題不僅能提供更個人化的使用者體驗，還能大幅延長 AMOLED 螢幕的電池續航力。這些螢幕是我們在新款高階手機上看到的，而且在行動裝置上越來越受歡迎。

這張圖片最初是在演講中顯示，這是當時的螢幕截圖

2018 年的 Android 深色主題研究顯示，視螢幕亮度和整體使用者介面而定，深色主題最多可節省 60% 的耗電量。這項 60% 的數據是比較 YouTube 播放畫面 (影片已暫停，螢幕亮度為 100%，應用程式 UI 採用深色主題) 與淺色主題得出的結果。

請盡可能為使用者提供深色主題體驗。

容器回應

在 CSS 中，最令人期待的新興領域之一就是容器查詢，也經常稱為元素查詢。從以網頁為基礎的回應式設計，轉移到以容器為基礎的回應式設計，對設計生態系統的演進影響之大，實在難以估量。

以下是容器查詢提供的強大功能範例。您可以根據資訊卡元素的父項容器，操控任何樣式，包括連結清單、字型大小和整體版面配置：

在 Codepen 上查看示範 (Canary 版中需啟用旗標)。

這個範例顯示兩個相同的元件，但容器大小不同，兩者都佔用使用 CSS 格線建立的版面配置空間。每個元件都會配合自己的空間分配調整大小，並相應設定樣式。

單獨使用媒體查詢無法達到這種彈性程度。

容器查詢提供更動態的回應式設計方法。 也就是說，如果您將這個資訊卡元件放在側欄、主視覺區或網頁主體內的格線中，元件本身會根據容器 (而非檢視區塊) 擁有自己的回應式資訊和大小

這需要 @container at 規則。這項規則的運作方式與含有 @media 的媒體查詢類似，但 @container 會查詢父項容器的資訊，而非檢視區塊和使用者代理程式。

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

首先，請在父項元素上設定容器。然後使用 min-width 或 max-width 撰寫 @container 查詢，根據容器大小設定容器內任何元素的樣式。

上述程式碼使用 max-width，並將連結設為 display:none，同時在容器寬度小於 850px 時縮小時間字型大小。

容器查詢資訊卡

在這個示範工廠網站中，每個產品資訊卡 (包括首頁、最近瀏覽項目側欄和產品格線中的資訊卡) 都是完全相同的元件，且標記相同。

在 Codepen 上查看示範 (Canary 版中需啟用旗標)。

建立這個完整版面配置時，沒有使用任何媒體查詢，只有容器查詢。這樣一來，每個產品資訊卡就能移至適當的版面配置，填滿空間。舉例來說，格線會使用 minmax 欄配置，讓元素流入空間，並在空間過於壓縮時重新配置格線 (表示已達到最小大小)。

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

當格線中至少有 350px 的空間時，資訊卡版面配置會設為 display: flex，並預設 flex-direction 為「row」，因此會呈現水平方向。

如果空間不足，產品資訊卡會堆疊顯示。每個產品資訊卡都會自行設定樣式，這單靠全域樣式是無法實現的。

混合使用容器查詢和媒體查詢

容器查詢的用途非常廣泛，其中一個就是日曆元件。您可以根據父項的可用寬度，使用容器查詢重新配置日曆活動和其他區隔。

在 Codepen 上查看示範 (Canary 版中需啟用旗標)。

這個示範容器會查詢，以變更日曆中日期和星期幾的版面配置和樣式，並調整預定活動的邊界和字型大小，讓活動更符合空間。

接著，使用媒體查詢，針對較小的螢幕尺寸調整整個版面配置。 這個範例說明如何合併媒體查詢 (調整全域或巨集樣式) 和容器查詢 (調整容器的子項及其微樣式)。

因此，我們現在可以在同一個 UI 元件中思考巨集和微觀版面配置，做出一些非常精細的設計決策。

目前使用容器查詢

您現在可以在 Chrome Canary 中啟用旗標，搶先體驗這些示範。前往 Canary 中的 about://flags，然後開啟 #enable-container-queries 旗標。這會啟用 contain 屬性的 @container、inline-size 和 block-size 值支援，以及 LayoutNG Grid 實作。

這個旗標也會啟用對應的 Chrome 開發人員工具功能。 瞭解如何在開發人員工具中檢查容器查詢並進行偵錯。

範圍樣式

如要以容器查詢為基礎建構，請使用@scope搭配範圍樣式，限制選取器的觸及範圍。

範圍樣式圖
這張圖是 Miriam Suzanne 原創設計。

範圍樣式可讓您設定元件專屬樣式，避免名稱衝突。許多架構和外掛程式 (例如 CSS 模組) 已經支援在架構內執行這項操作。您可以使用範圍樣式，為元件原生編寫封裝樣式，並使用可讀取的 CSS，不必調整標記。

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

範圍設定可讓您建立「甜甜圈形狀」的選取器，並指定上下限。@scope 規則中包含的選取器會在這些限制之間相符。

舉例來說，在分頁面板中，您會希望分頁取得範圍樣式，但這些分頁中的面板不受這些範圍樣式影響。

配合板型規格自動調整

在討論新時代的網頁設計時，下一個主題是外型規格的轉變，以及網頁社群需要設計的內容 (例如可變形螢幕或虛擬實境) 日益增多的可能性。

跨距圖
圖片來自 Microsoft Edge Explainers。

折疊式或彈性螢幕，以及為螢幕跨越設計，就是我們今天看到外型規格轉移的一個例子。我們也正在開發螢幕跨越功能，以滿足這些新外型規格和需求。

實驗性的媒體查詢可協助我們處理跨螢幕問題。目前的運作方式如下：@media (spanning: <type of fold>)。這個範例會設定含有兩欄的格線版面配置：一欄的寬度為 --sidebar-width (預設為 5rem)，另一欄則為 1fr。在具有單一垂直摺疊的雙螢幕上查看版面配置時，--sidebar-width 的值會更新為左側摺疊的環境值。

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

這樣一來，側邊欄 (在本例中為導覽) 就能填滿其中一個摺疊空間，應用程式 UI 則填滿另一個空間。這樣可避免使用者介面出現「摺痕」。

您可以在 Chrome 開發人員工具模擬器中測試摺疊式螢幕，直接在瀏覽器中偵錯及製作螢幕跨越原型。

結論

探索平面螢幕以外的 UI 設計，是容器查詢和範圍樣式如此重要的另一個原因。您可藉此將元件樣式與網頁版面配置、全域樣式和使用者樣式區隔開來，進而打造更具彈性的回應式設計。也就是說，您現在可以使用以網頁為基礎的媒體查詢設計巨集版面配置，包括跨螢幕的細微差異。同時在元件上使用含有容器查詢的微版面配置，並新增以使用者偏好設定為依據的媒體查詢，根據使用者獨特的偏好設定和需求自訂使用者體驗。

新回應式廣告的圓圈

這是新的回應式設計。

這項技術結合了巨觀和微觀版面配置，並考量使用者自訂項目和板型規格。

光是其中任何一項變更，就足以大幅改變網頁設計方式。但結合來看，這些功能代表我們對回應式設計的概念，甚至出現了重大轉變。現在，您需要開始思考如何根據視埠大小以外的因素，設計出回應式網頁，並考量所有這些新軸，打造更優質的元件式自訂體驗。

新一代的網頁設計技術已問世，您現在就能開始探索。

web.dev/learnCSS

目前，如果想提升 CSS 技能，或重新複習一些基本概念，我的團隊將在 web.dev 推出全新的免費 CSS 課程和參考資料。如要存取這些資源，請前往 web.dev/learnCSS。

希望您喜歡這份簡介，並對新一代的網頁設計感到興奮，也期待您與我們一同迎接網頁設計的未來。

這為 UI 社群開啟了龐大的機會，讓我們能採用以元件為基礎的樣式、新的外型規格，並打造使用者回應式體驗。