長(zhǎng)久以來，CSS 中最受歡迎的功能之一就是容器查詢鹃答。這幾乎是我們的圣杯，也是 CSS 工具箱中缺失的最大拼圖突硝。
現(xiàn)在测摔，容器查詢終于來了。過去近兩年解恰，它已經(jīng)在所有主流瀏覽器中受到了支持锋八。我們的祈禱終于得到了回應(yīng)！
我們現(xiàn)在可以根據(jù)元素的容器來應(yīng)用條件 CSS护盈，使用的語(yǔ)法也很熟悉：
@container (min-width: 40rem) {
.some-elem {
font-size: 1.5rem;
}
}
不過奇怪的是挟纱，我們中很少有人實(shí)際在使用容器查詢。我和許多開發(fā)者聊過腐宋，大多數(shù)人僅僅是做了一些簡(jiǎn)單的嘗試紊服，如果他們真的試過的話欺嗤。我們終于得到了想要的工具撤师，但卻還沒有普及使用剂府。
這其中有很多原因腺占，但我認(rèn)為最大的一個(gè)原因是，關(guān)于它們的工作原理還存在很多困惑意鲸。容器查詢不像媒體查詢那樣直接。要有效地使用它們槐雾，我們需要了解它的限制，以及如何在這些限制內(nèi)工作擎值。
我已經(jīng)使用容器查詢幾個(gè)月了厕氨，一旦建立了正確的思維模型品追，容器查詢真的很美好。在這篇文章中，我們將深入探討這些內(nèi)容鲫趁，以便你可以在工作中開始使用它們堡僻！
瀏覽器不支持
看起來你正在使用一個(gè)不支持容器查詢的瀏覽器巢价。因此城菊，頁(yè)面上的演示可能無法正常工作。
你大概仍然可以理解這篇文章的內(nèi)容，但為了獲得最佳體驗(yàn)，我建議你更新或切換到支持的瀏覽器（在新標(biāo)簽頁(yè)中打開）酥夭。
基本概念
過去幾十年诚隙，我們做響應(yīng)式設(shè)計(jì)的主要工具是媒體查詢。最常見的是炉峰，我們使用視口的寬度來有條件地應(yīng)用一些 CSS：
@media (min-width: 40rem) {
.mobile-only {
display: none;
}
}
關(guān)于單位的說明
大多數(shù)開發(fā)者在媒體查詢中使用像素婆廊，但這往往會(huì)讓那些增大瀏覽器默認(rèn)字體大小的用戶體驗(yàn)變差疯攒。在本文中嗦随，我將為所有媒體/容器查詢專門使用 rem 單位列荔。
你可以在我的博客文章《關(guān)于像素和無障礙的驚人真相》中了解更多枚尼。
媒體查詢很好用，但它們只關(guān)注全局屬性署恍，比如視口尺寸或操作系統(tǒng)的主題顏色囱修。有時(shí)，我們希望根據(jù)某些局部屬性來有條件地應(yīng)用 CSS，例如元素容器的大小刮刑。
舉個(gè)例子喉祭，假設(shè)我們有一個(gè) ProfileCard 組件，用來顯示用戶檔案的關(guān)鍵信息：
Anthony Harris
@theboxmodel
San Francisco, US
Staff UI/UX Designer
Feb 4, 2015
748 Posts
Dr. Kai Bechstein
@pianofingers
Berlin, DE
Physician
Oct 25, 2019
1369 Posts
Faajal Singh
@faajal31
Vancouver, CA
Principal Engineer
Nov 25, 2017
2305 Posts
在這種情況下习寸，每個(gè) ProfileCard 都比較窄胶惰，因此信息會(huì)垂直堆疊成一個(gè)高柱。
但在其他情況下霞溪，我們可能會(huì)有更多的空間孵滞。這樣的話中捆，我們的 ProfileCard 能根據(jù)可用空間自動(dòng)切換布局不是很酷嗎？
也許像這樣：
Svetlana Ahmed
@Svetlana14
Tokyo, JP
Tattoo Artist
Apr 15, 2013
1293 Posts
瀏覽器不支持
此 ProfileCard 使用容器查詢來在空間允許時(shí)展示一個(gè)替代布局坊饶。由于你的瀏覽器不支持容器查詢泄伪，它對(duì)你來說可能顯示不出不同效果。
請(qǐng)考慮切換到支持的瀏覽器（在新標(biāo)簽頁(yè)中打開）匿级。
在某些情況下蟋滴，如果我們的 ProfileCard 會(huì)隨著視口尺寸變化，我們可以使用媒體查詢來實(shí)現(xiàn)這個(gè)效果……但并不總是如此痘绎。
例如津函，假設(shè)我們使用類似于這樣的 flex 網(wǎng)格排列這些卡片：
