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

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

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-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;
  }

  /* ... */
}

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

上述程式碼使用 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 社群帶來了巨大商機，可採用元件式樣式、新板型規格，並打造使用者回應式體驗。