容器查詢個案研究

Swetha Gopalakrishnan

Saurabh Rajpal

容器查詢 可提供高度動態且靈活的回應式方法 設計。容器查詢使用規則中的 @container。運作方式類似 轉換為使用 @media 的媒體查詢，但 @container 會查詢父項 來呈現樣式資訊，而非可視區域和使用者代理程式。

容器查詢屬於基準新功能的一部分。

透過回應容器大小，容器查詢可讓元件 以便透過介面前往相關位置例如，資訊卡元件 例如側欄、主要元件 區段或格狀檢視畫面。

如下圖所示，您可以將媒體查詢合併為巨集 版面配置、適用於微版面配置的容器查詢、採用使用者偏好設定的媒體 建立強大的回應式設計系統。已讀 進一步瞭解容器查詢和 全新的回應式設計。

本文是探討電子商務公司運作方式的系列文章之一 運用新的 CSS 和 UI 功能提升網站品質這次我們會深入介紹 瞭解部分公司如何運用容器查詢，從中獲益。

redBus

redBus 會替自己的行動版和電腦版提供不同的程式碼。 只要在 觀光景點和 cargo 網頁，因此得以統一這個程式碼 並將程式碼彙整成單一程式碼集不僅為回應式設計，也方便儲存 相當可觀下例示範如何使用 Cargo 網頁：

程式碼

在以下範例中，.bpdpCardWrapper 是父項容器。 名為 bpdpSection

如果容器 bpdpSection 的寬度下限為 744px，則 font-size 和 line-height 適用於 .bpdpCardContainer 和 .subTxt, .bpdpAddress 已更新。

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

影響

Tokopedia

Tokopedia 的產品詳細資料頁面 (PDP) 包含多個商店分頁， 產品資訊。先前，這個頁面的版面配置分為三個部分 有時候，就算是較小的產品名稱遭到截斷 螢幕大小 (請參閱下列「使用前」影片)。

為解決這個版面配置問題，該公司可以輕鬆快速採用容器查詢。 完成這項實作後，他們能靈活的版面配置，並設為 產品名稱一律都會完整顯示 (請參閱下方的「使用後」影片)。

之前

使用後

程式碼

以下程式碼會查詢名為 infowrapper 的父項容器大小。 如果 infowrapper 的寬度上限為 360 像素，則子項元件 width、margin,和padding已調整。

將 container-type 設為 inline-size 即可查詢內嵌方向大小 父項。在英文等拉丁語系中，這是指 父項容器，因為文字是從左到右內嵌。

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

使用容器查詢時的注意事項

Tokopedia 在自家網站上找出省略符號，因而發現了他們的應用實例。 這表示容器可能太小，導致內容無法剪下 關閉。

電子商務網站的容器查詢的另一個做法是 並用於重複使用的元件舉例來說，系統可能會顯示「加入購物車」按鈕 (舉例來說，當圖示位於 產品資訊卡和圖示 (如果是網頁上的主要行動號召) 按鈕很適合使用容器查詢。

您可以選擇不斷改善網站。舉例來說， 可以先使用較小型的用途，例如 Tokopedia 的橢圓形例子 實作容器查詢接著逐步找出更多案件， 來改善 CSS

資源：

• 容器查詢進入穩定版瀏覽器
• 在瀏覽器中設計容器查詢
• 容器查詢示範
• 示範：容器查詢資訊卡
• 影片：網頁 UI 新功能 - 2023 年 I/O 大會
• 您要回報錯誤或提出新功能建議嗎？歡迎提供寶貴意見。

探索本系列的其他文章，瞭解電子商務的運作方式 公司在使用全新 CSS 和 UI 功能 (例如捲動式介面) 時獲得良好成效 動畫、彈出式視窗、容器查詢和 has() 選取器。

• 為什麼網頁 UI 功能對電子商務網站至關重要？
• 捲動導向動畫個案研究
• 查看轉換個案研究
• 彈出式視窗個案研究
• :has() 選取器個案研究