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

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

Una Kravets

立即採用回應式設計

目前，在使用「回應式設計」一詞時，您最有可能考慮使用媒體查詢來變更版面配置，在行動裝置、平板電腦和桌機大小等方面調整設計大小。

但不久之後，這種回應式設計觀感可能會被認為過時，也就是使用表格來管理網頁版面配置。

以可視區域為基礎的媒體查詢可提供一些強大工具，但缺乏豐富掌握。這種版面配置無法回應使用者需求，也無法將回應式樣式插入元件。

注意： 本文提及的元件時，這代表元素包括資訊卡或側欄等其他元素所組成的元素。這些元件就構成了我們的網頁。

您可以使用全域可視區域資訊來設定元件樣式，但這些元素仍不具專屬樣式，而且如果設計系統是以元件為基礎，而不是以頁面為基礎的設計，這個做法就不適用。

好消息是，大環境正在改變，且趨勢瞬息萬變。 CSS 技術日新月異，回應式設計也正朝著未來邁進。

我們大約每隔 10 年就會發生這種變化。我們在 10 年前發現 行動裝置和回應式設計出現重大變化，CSS3 的興起。

資料來源：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 播放畫面與淺色主題，比較 YouTube 播放畫面與亮度 100% 的暫停影片。

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

回應容器

CSS 中最令人興奮的其中一項面向就是容器查詢，也稱為「元素查詢」。很難強調從網頁式回應式設計改為容器式回應式設計將會如何演化設計生態系統。

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

查看 Codepen 示範 (Canary 中的旗標後方)。

此範例顯示兩個包含兩個不同容器大小的相同元件，兩者都會在透過 CSS 格線建立的版面配置中佔用空間。每個元件都符合其獨特的空間配額，並視需求設定本身的樣式。

這種彈性是光靠媒體查詢無法做到的。

容器查詢為回應式設計提供了更加動態的方法。這表示如果您將這張資訊卡元件放在側欄、主要內文或頁面主要內文中的格線內，元件本身就會根據容器 (而非可視區域) 擁有回應式資訊和大小

這種做法需要 @container at-rule，這的運作方式和使用 @media 的媒體查詢類似，但 @container 會查詢父項容器以取得資訊，而不是可視區域和使用者代理程式。

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

首先，設定父項元素的隔離。然後編寫 @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，該版面配置的彈性方向預設為「row」。

空間較小，產品資訊卡會堆疊顯示。每個產品資訊卡都有自己的風格，光是全域樣式無法做到。

結合容器查詢和媒體查詢

容器查詢的用途很多，比如做為日曆元件。您可以使用容器查詢，根據父項的可用寬度重新版面配置日曆活動和其他區段的版面配置。

查看 Codepen 示範 (Canary 中的旗標後方)。

這個示範容器會查詢，變更日曆日期和星期幾的版面配置和樣式，以及調整排定事件的邊界和字型大小，以便符合空間。

接著，使用媒體查詢來調整整個版面配置，以符合較小的螢幕尺寸。 這個範例顯示如何combine媒體查詢 (調整全域或巨集樣式) 與容器查詢 (調整容器的子項及其微樣式) 的強大功能。

我們現在可以將同一個 UI 元件中的巨集和微型版面配置納入考量，以做出幾項十分細微的設計決策。

立即使用容器查詢

這些示範影片現在可在 Chrome Canary 中連同旗標一起播放。前往 Canary 中的 about://flags，並啟用 #enable-container-queries 標記。這樣即可支援 contain 屬性的 @container、inline-size 和 block-size 值，以及 LayoutNG 格線實作。

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

限定範圍樣式

為了以容器查詢為基礎，CSS 工作團隊也會積極討論範圍樣式，協助您為元件設定適當的名稱間距以及避免發生衝突。

圖像原本是由 Miriam Suzanne 設計的。

限定範圍樣式提供直通和元件專用的樣式，可避免命名衝突，許多架構和外掛程式 (例如 CSS 模組) 已協助我們在架構中完成命名。這個規格現在可讓我們為元件使用可讀取的 CSS 以原生方式編寫封裝樣式，無需調整標記。

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

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

限定範圍可讓我們建立「圓環形狀」選取器，我們可以在其中指定要保留樣式的位置，以及要在哪裡取消該限定範圍樣式，以便返回更通用的樣式。

例如，我們希望分頁取得限定範圍的分頁面板，以及分頁內的面板取得父項樣式。

彈性調整板型規格

在我們對話中，關於回應式設計的新時代，下一個主題已經在板型規格上發生了變化，而且我們必須為網路社群設計了更多可能性 (例如改變形狀的螢幕或虛擬實境)。

Microsoft Edge 說明的圖表。

折疊式或可彈性螢幕，而針對螢幕跨距設計，我們今天就可以看到板型規格位移。而螢幕範圍尚未推出另一項規格 能滿足新的板型規格和需求

而針對螢幕時距的實驗性媒體查詢或許能幫上忙。目前的運作方式如下：@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 會填滿另一邊空間。這可防止 UI 出現「當機」。

您可以在 Chrome 開發人員工具模擬器中測試折疊式裝置畫面，直接在瀏覽器中偵錯及設計螢幕原型。

結論

探索平面以外的 UI 設計也是容器查詢和限定範圍樣式如此重要的原因。這也可讓您區隔元件樣式，包括網頁版面配置、全域樣式和使用者樣式，以及更靈活的回應式設計。也就是說，您現在可以使用網頁式媒體查詢 (包括畫面橫跨的細微差異) 來設計巨集版面配置。同時，請使用微型版面配置，針對元件執行容器查詢，並新增以使用者偏好為基礎的媒體查詢，根據其獨特偏好與需求自訂使用者體驗。

這是新的回應式設計。

它結合了微距版面配置與微型版面配置，而最重要的是將使用者自訂和板型規格納入考量。

光是上述任一變更，我們就能大幅改變我們設計網頁版的方式。但兩者概念也代表我們對於回應式設計的概念有了很大的轉變。下一步是思考回應式設計，而非可視區域大小，並開始考量所有這些新的軸，以打造更優異的元件式自訂體驗。

回應式設計的下個時代來了，歡迎自行探索。

web.dev/learnCSS

如果你目前想讓 CSS 遊戲更上一層樓，並想重新溫習一些基本概念，我們的團隊即將推出 Web.dev 的全新 CSS 課程和參考資料，歡迎透過 web.dev/learnCSS 參加這項課程。

希望您會喜歡這份簡報的下一代回應式設計總覽，也喜歡其中一些基本功能，也希望您很期待看到這項技術對網頁設計帶來的助益。

我們發揮了 UI 社群的大好機會，採用以元件為基礎的樣式、新的板型規格，並提供使用者回應體驗。