多年來(lái)，前端工程師一直為 CSS 的一個(gè)局限性而頭疼：媒體查詢(xún)只能響應(yīng)視口大小。想讓組件根據(jù)父容器尺寸自適應(yīng)？過(guò)去只能一嘆奈何。但現(xiàn)在，這一切都迎來(lái)了改變——容器查詢(xún)（Container Queries）應(yīng)運(yùn)而生，讓元素能夠基于其直接父級(jí)容器，而非整個(gè)視口，來(lái)調(diào)整自身樣式。可以說(shuō)，它是“更聰明”的媒體查詢(xún)。

為什么容器查詢(xún)?nèi)绱酥匾?/span>

一直以來(lái)，CSS 的響應(yīng)式布局都是以屏幕寬度為依據(jù)。你可能寫(xiě)過(guò)：

@media (max-width: 600px) {
  .card { font-size: 14px; }
}

但一旦這個(gè) .card 被放進(jìn)側(cè)邊欄或某個(gè)狹窄區(qū)域里，它依舊要等整個(gè)頁(yè)面寬度小于 600px 才會(huì)縮小。容器查詢(xún)則截然不同——它讓組件僅在所屬容器寬度低于某值時(shí)才觸發(fā)樣式變化。

示例

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

@container (max-width: 500px) {
  .card { font-size: 14px; }
}

如上設(shè)置后，只有當(dāng) .card 所在的父級(jí)容器寬度小于 500px 時(shí)，卡片的字體才會(huì)變小；而不再受瀏覽器整體寬度影響。這樣，你無(wú)需再用各種嵌套的媒體查詢(xún)或復(fù)雜的布局 hack，只需讓組件自然地適應(yīng)周?chē)臻g。

如何立刻使用容器查詢(xún)

• 聲明容器在父元素上添加 container-type 屬性：

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

這樣，瀏覽器就會(huì)監(jiān)測(cè)該容器的寬度變化。

• 編寫(xiě)容器查詢(xún)使用 @container 規(guī)則替代傳統(tǒng)媒體查詢(xún)：

@container (max-width: 400px) {
  .card { padding: 8px; }
}

無(wú)論視口如何縮放，只有當(dāng)父容器寬度低于 400px 時(shí)，卡片才會(huì)調(diào)整內(nèi)邊距。

容器查詢(xún)的最佳實(shí)踐場(chǎng)景

• 可復(fù)用的 UI 組件：按鈕、卡片、模態(tài)框等無(wú)需全局?jǐn)帱c(diǎn)就能自適應(yīng)。
• 設(shè)計(jì)系統(tǒng)：構(gòu)建真正獨(dú)立、自適應(yīng)的組件，確保在任何布局中都能按需調(diào)整。
• 網(wǎng)格與側(cè)邊欄布局：組件根據(jù)實(shí)際可用空間伸縮，而非依賴(lài)頁(yè)面整體寬度。

有哪些限制？

• 僅支持塊級(jí)或 inline-block 元素：對(duì) display: inline 無(wú)效；
• 性能考量：大量容器查詢(xún)會(huì)增加瀏覽器布局計(jì)算負(fù)擔(dān)；
• 兼容性問(wèn)題：老版本 Safari 和 Internet Explorer 暫不支持。

是否應(yīng)該立即采納？答案是肯定的。如果你正著手構(gòu)建現(xiàn)代化且可擴(kuò)展的組件庫(kù)，容器查詢(xún)無(wú)疑是未來(lái)趨勢(shì)。它讓組件自主適配周?chē)h(huán)境，不再被僵化的斷點(diǎn)束縛，也無(wú)需再盲目依賴(lài)全局媒體查詢(xún)。CSS 從此變得更智能，你準(zhǔn)備好告別“舊式”媒體查詢(xún)了嗎？