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

在回應式網頁設計新時代中控制宏觀和微觀版面配置。

回應式設計現況

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

不過，這種回應式設計的觀念很快就會過時，就像使用表格做為頁面版面配置一樣。

以檢視區為基礎的媒體查詢可提供一些強大的工具，但缺乏許多精細的功能。這些方法無法回應使用者需求，也無法將回應式樣式注入元件中。

您可以使用全域檢視區資訊為元件設定樣式，但元件仍不會擁有自己的樣式，而且在設計系統以元件為基礎而非以頁面為基礎時，這項做法將無法運作。

好消息是，生態系統正在改變，而且變化速度相當快速。CSS 不斷演進，響應式設計的新時代即將到來。

大約每 10 年就會發生一次。10 年前，也就是 2010 到 2012 年左右，我們看到行動裝置和回應式設計發生重大變化，CSS3 也隨之問世。

因此，生態系統已準備好迎接 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，以便動態調整媒體查詢中的新主題。

為方便測試部分偏好設定查詢，您可以使用模擬用途的 DevTools，而非每次都開啟系統偏好設定。

為深色主題設計

為深色主題設計時，不只是反轉背景和文字顏色，或使用深色捲軸條。但您可能沒有意識到，這其中有幾個需要考量的因素。舉例來說，您可能需要降低深色背景的色彩飽和度，以減少視覺上的振動。

您可以使用元素的背景顏色中的光線，而非使用陰影來建立深度並將元素繪製在前方。這是因為陰影在深色背景上不會有太大效果。

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

2018 年 Android 深色主題研究顯示，根據螢幕亮度和整體使用者介面，節省的電力可達 60%。60% 的統計資料是將 YouTube 播放畫面與暫停的影片進行比較，並在 100% 螢幕亮度下，使用深色主題的應用程式 UI 與淺色主題進行比較。

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

配合容器自動調整

CSS 最令人期待的新興領域之一，就是容器查詢 (也常稱為元素查詢)。從以網頁為基礎的回應式設計轉換為以容器為基礎的回應式設計，對於設計生態系統的演進而言，其影響力絕對不容小覷。

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

這個範例顯示兩個相同元件，其中容器大小各不相同，兩者都會在使用 CSS 格線建立的版面配置中佔用空間。每個元件都會適應其專屬的空間分配，並依此調整樣式。

這種靈活性是媒體查詢無法提供的。

容器查詢可提供更具動態性的回應式設計方法。也就是說，如果您將這個資訊卡元件置於側欄或主畫面內的英雄區段或格狀區塊中，元件本身會根據容器 (而非檢視區) 擁有其回應式資訊和大小

這需要使用 @container at-rule。這項功能的運作方式與使用 @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 時縮小時間字型大小。

容器查詢資訊卡

在這個示範工廠網站中，每個產品資訊卡 (包括主頁面、最近查看項目的側欄和產品格狀圖) 都是完全相同的元件，且具有相同的標記。

這裡沒有用於建立整個版面的媒體查詢，只有容器查詢。這樣一來，每張產品資訊卡都能轉換至適當的版面配置，以填滿其空間。舉例來說，格線會使用 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」。

由於可用空間較少，產品資訊卡會堆疊。每張產品資訊卡都會自行設定樣式，這項功能無法單靠全域樣式實現。

將容器查詢與媒體查詢混合

容器查詢有許多用途，其中之一就是日曆元件。您可以使用容器查詢，根據上層可用的寬度重新安排日曆活動和其他區段。

這個示範容器會查詢並變更日曆日期和星期幾的版面配置和樣式，以及調整排定活動的邊距和字型大小，以便更妥善地配合空間。

接著，使用媒體查詢為較小的螢幕尺寸調整整個版面配置。這個範例說明結合媒體查詢 (調整全域或宏觀樣式) 與容器查詢 (調整容器的子項和微觀樣式) 的強大功能。

因此，我們現在可以考慮在同一個 UI 元件中使用宏觀和微觀版面配置，以便做出精細的設計決策。

立即使用容器查詢

這些示範現在可在 Chrome Canary 中透過旗標啟用。前往 Canary 中的 about://flags，並開啟 #enable-container-queries 旗標。這會讓 contain 屬性和 LayoutNG Grid 實作支援 @container、inline-size 和 block-size 值。

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

範圍樣式

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

範圍限定樣式可讓您設定元件專屬的樣式，以免發生命名衝突。許多架構和外掛程式 (例如 CSS 模組) 已可讓我們在架構中執行這項操作。使用範圍限定樣式，您就能原生為元件編寫可讀取 CSS 的封裝樣式，而無須調整標記。

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

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

您可以使用範圍設定功能建立「甜甜圈形狀」的選取器，並指定上限和下限。@scope 規則中包含的選取器會在這些限制之間進行比對。

這類情況的例子是分頁面板，您希望分頁取得已套用作用範圍的樣式，但分頁內的面板不受這些已套用作用範圍的樣式影響。

配合板型規格自動調整

我們接下來要討論的話題是，在響應式設計新時代中，螢幕尺寸的轉變，以及我們需要為網路社群設計的可能性 (例如變形螢幕或虛擬實境)。

折疊式或可彎曲的螢幕，以及為跨螢幕設計的設計，就是我們目前看到的板型規格轉變。跨螢幕功能是另一項正在開發的規格，可涵蓋這些新版型和需求。

實驗性的媒體查詢可在這裡提供協助，目前的運作方式如下：@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 查看。

希望您喜歡這篇關於下一代回應式設計的總覽文章，以及其中的部分原始元素。此外，我也希望您能像我一樣，對這項技術對未來網頁設計的影響感到興奮。

這為我們這個使用者介面社群帶來了絕佳機會，讓我們採用以元件為基礎的樣式、新版型，並打造回應使用者的體驗。