本頁面由 Cloud Translation API 翻譯而成。

檢查 CSS 容器查詢並進行偵錯

Sofia Emelianova

Jecelyn Yeen

本指南說明如何在 Chrome 開發人員工具的「Elements」Elements面板中檢查 CSS 容器查詢並偵錯。

CSS 容器查詢可讓您根據元素的父項容器屬性操控元素的樣式。這項功能將回應式網頁設計的概念從網頁式轉移到容器式。

本指南中的螢幕截圖取自這個示範頁面。

探索容器及其子系

在「元素」Elements面板中，定義為查詢容器的每個元素旁邊都會顯示 container 標記。徽章會切換容器及其子系的虛線疊加層。

如要切換重疊元素，請按照下列步驟操作：

開啟開發人員工具。
在「元素」Elements面板中，按一下已定義為容器的元素旁邊的 container 徽章。

在這個範例中，container-type: inline-size 屬性定義了容器元素。子係可以查詢其內嵌尺寸 (水平軸)，並根據容器寬度變更樣式。

檢查容器查詢

子元素 (即容器符合查詢條件時) 會在「元素」Elements面板中顯示 @container 查詢宣告。

如要瞭解何時可以檢查這個示範頁面中的 @container 宣告，請查看以下程式碼範例：

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }