新時代佈局新特性 -- 容器查詢

終於，在漫長的等待下，容器查詢（CSS Container Queries）將在 Chrome 105 版本得到正式的支援！

而目前，我們也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通過開啟 Enable CSS Container Queries 特性搶先體驗。

響應式過往的痛點

在之前，響應式有這麼個掣肘。同一 DOM 的不同佈局形態如果想要變化，需要依賴諸如媒體查詢來實現。

像是這樣：

通過瀏覽器視窗大小的變化，藉助媒體查詢，實現不一樣的佈局。

但是，在現如今，大部分 PC 端頁面使用的是基於 Flex/Grid 的彈性佈局。

很多時候，當內容數不確定的時候，即便是相同的瀏覽器視窗寬度下，元素的佈局及寬度可能也是不一致的。

考慮下面這種情況：

```HTML

CSS

.wrap { display: flex; flex-wrap: wrap; gap: 10px; } li { width: 190px; height: 100px; flex-grow: 1; flex-shrink: 0; } ```

這種情況下，如果需要在不同寬度下對最後一個元素做一下處理，傳統方式還是比較麻煩的。

在這種情況下，容器查詢（CSS Container Queries）就應運而生了！

容器查詢的能力

容器查詢它給予了 CSS，在不改變瀏覽器視口寬度的前提下，只是根據容器的寬度變化，對佈局做成調整的能力。

還是上面的例子，簡單的程式碼示意：

```HTML

CSS .wrap { width: 500px; resize: horizontal; overflow: auto; } .g-container { display: flex; flex-wrap: nowrap; } .wrap { / CSS CONTAINER / container-name: wrap; container-type: inline-size; } @container wrap (max-width: 400px) { .g-container { flex-wrap: wrap; flex-direction: column; } } ```

像是這樣，我們通過 resize: horizontal 來模擬單個容器的寬度變化，在這種情況下，容器查詢能夠做到在不同寬度下，改變容器內部的佈局。

這樣，就簡單實現了一個容器查詢功能：

注意，仔細和上面的例子作對比，這裡，瀏覽器的視口寬度是沒有變化的，變化的只是容器的寬度！

媒體查詢與容器查詢的異同，通過一張簡單的圖看看，核心的點在於容器的寬度發生變化時，視口的寬度不一定會發生變化：

我們簡單拆解下上述的程式碼，非常好理解。

1. 在 .warp 的樣式中，通過 container-name: wrap 註冊一個容器
2. 註冊完容器之後，便可以通過 @container wrap () 容器查詢語法，在內部寫入不同情況下的另外一套樣式
3. 這裡 @container wrap (max-width: 400px) {} 的意思便是，當 .wrap 容器的寬度小於 400 px 時，採用內部定義的樣式，否則，使用外部預設的樣式

關於容器查詢更為具體的語法，我建議還是上 MDN 或者規範詳細看看 -- MDN -- CSS Container Queries

關於容器查詢的一些思考

在第一次看到這個語法之後，我最先想到的場景便是字型的自適應大小。

我們來看這樣一個場景，很多時候，我們無法預估文案內容的多少。因此，會希望當內容較多時，字型較小，而當內容不足一行或者非常少的時候，字型較大：

CodePen Demo -- Container Quries Demo

當然，現階段我暫時沒有試出來在容器查詢中，容器的寬度能夠隨著輸入的變化動態改變容器大小，這裡目前有點瑕疵，是個需要繼續鑽研的點。

當然，在那些能夠事先知道不同寬度，預設不同佈局的場景下，容器查詢的用武之地是非常之大的。

我們可以利用它快速構建在容器不同寬度下的不同表現。

譬如這樣一個 DEMO：

CodePen Demo -- CSS Container Queries

總得來說，容器查詢，還是處於比較早期的發展之中，許多有意思的用法還有待挖掘。但它確實算得上是 CSS 今年比較大的一個革新。

最後

好了，本文到此結束，希望本文對你有所幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。