CSS容器查詢終于來了! 它們目前在谷歌瀏覽器（105）中得到了支持，很快就會在Safari 16中得到支持。這對前端來說容器查詢與媒體查詢一樣重要。

在這節課中，我們介紹一下容器查詢是如何工作的，如何使用它們，以及語法是什么樣子的，并分享一些現實生活中的例子和用例。

簡介

在設計一個組件時，我們需要適配不同的變化，并根據CSS類或視口大小來改變它們。這對于我們開發來說不是很理想，會迫使我們根據變化類或視口尺寸來寫CSS。

考慮下面例子：

我們有一個卡片組件，當視口足夠大時，它應該切換到水平樣式。乍一看，這可能聽起來不錯。然而，當你更深入地思考這個問題時，它就有點復雜了。

如果我們想在不同的地方使用同一個卡片組件，比如在空間狹小的側邊欄和有更多空間的主區域，我們就需要使用不同的類來適配：

.c-article {
  /* Default stacked style */
}
@media (min-width: 800px) {
  /* Horizontal style. */
  .c-article--horizontal {
    display: flex;
    align-items: center;
  }
}

如果我們不想用上面的方式，那么會出現下面這樣的情況：

這種從用戶界面的角度來看，并不友好。

通過容器查詢，我們可以簡單地編寫響應父級或容器寬度的CSS。請看下圖：

注意到在媒體查詢中，我們是如何根據視口或屏幕寬度來查詢一個組件的。在容器查詢中，同樣的情況發生在父級上。

什么是容器查詢？

通過 container-type 屬性查詢一個組件與最接近的父類的關系，該父類有一個定義的包含物。

我們過去在媒體查詢中寫CSS的方式，但只是針對組件層面。

容器查詢語法

要根據一個組件的父級寬度查詢，我們需要使用 container-type 屬性。看下面的例子"

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

有了這些，我們就可以開始查詢一個組件。在下面的例子中，如果.card元素的容器的寬度等于400px或更大，我們需要添加一個特定的樣式。

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

雖然上述方法可行，但當有多個容器時，就會造成混亂。為了避免這種情況，最好為一個容器命名。

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

現在，我們可以在 @container 旁邊加容器名稱，如下所示。

@container card (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

完整代碼：

.wrapper {
  container-type: inline-size;
  container-name: card;
}
.c-article {
  /* Default stacked style */
}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}

瀏覽器支持

容器查詢現在在Chrome 105中得到支持，并很快在Safari 16中得到支持。

事例

這邊有10個關于容器查詢的事例，地址：https://lab.ishadeed.com/container-queries。