CSS中的容器查詢(xún)?cè)试S組件響應(yīng)其父容器的大小，而不是視口。要使用它們，請(qǐng)定義具有容器類(lèi)型的容器，然后根據(jù)容器的寬度（或高度）使用@Container應(yīng)用樣式。您可以選擇將具有容器名稱(chēng)的容器命名以達(dá)到特異性。盡管瀏覽器支持仍在不斷發(fā)展，并且容器類(lèi)型：大小仍然是實(shí)驗(yàn)性的，但它們啟用了無(wú)JavaScript的模塊化，上下文感知的UI組件。

如果您一直在處理響應(yīng)式設(shè)計(jì)，則可能知道媒體查詢(xún)的有用程度。但是，如果您可以使組件對(duì)其容器而不是整個(gè)視口響應(yīng)，該怎么辦？這正是現(xiàn)代CSS中的容器查詢(xún)，讓您做到這一點(diǎn) - 它們是改變游戲模塊化，可重復(fù)使用的UI組件的游戲規(guī)則。

什么是容器查詢(xún)？

容器查詢(xún)?cè)试S您根據(jù)父容器的大小而不是整個(gè)瀏覽器窗口應(yīng)用樣式。當(dāng)您的組件需要根據(jù)放置位置而不同的組件時(shí)，這將非常有幫助，例如可能在側(cè)邊欄或全寬橫幅上顯示的卡片布局。

在集裝箱查詢(xún)之前，開(kāi)發(fā)人員通常依靠JavaScript或hacky的解決方法來(lái)獲得這種行為?，F(xiàn)在，它是本地干凈的。

要使用容器查詢(xún)，首先，您需要使用container-type屬性來(lái)定義容器：

 .My-Container {
  容器類(lèi)型：內(nèi)聯(lián)尺寸；
}

然后，您可以編寫(xiě)這樣的查詢(xún)：

 @Container（最小寬度：400px）{
  .my-component {
    / *在這里樣式 */
  }
}

這樣， .my-component只有在容器寬至少400px寬時(shí)才能獲得這些樣式 - 無(wú)論該容器出現(xiàn)在頁(yè)面上的何處。

如何設(shè)置合適的容器

默認(rèn)情況下，并非每個(gè)元素都可以是容器。您需要明確告訴瀏覽器哪些元素應(yīng)充當(dāng)容器。以下是：

• 使用container-type來(lái)定義您想要哪種遏制：
  • inline-size ：對(duì)寬度變化做出反應(yīng)。
  • size ：對(duì)寬度和高度都反應(yīng)（仍然是實(shí)驗(yàn)性的）。
  • normal ：沒(méi)有特殊的遏制。

您還可以使用container-name容器，如果您有多個(gè)嵌套容器，則可以幫助定位特定的容器：

 .My-Container {
  容器類(lèi)型：內(nèi)聯(lián)尺寸；
  集裝箱名稱(chēng)：卡式容器；
}

然后，在您的查詢(xún)中：

 @Container卡 - 范圍（最小寬度：500px）{
  / *在這里樣式 */
}

命名是可選的，但在處理深度嵌套的組件時(shí)很有用。

容器查詢(xún)的實(shí)際用途

最常見(jiàn)的現(xiàn)實(shí)世界使用之一是根據(jù)父級(jí)內(nèi)的可用空間調(diào)整組件布局。例如：

想象一下一個(gè)顯示圖像，標(biāo)題和價(jià)格的產(chǎn)品卡。在寬闊的布局中，您可能需要并排所有三個(gè)。但是在狹窄的側(cè)邊欄中，將它們垂直堆疊更有意義。

您只需在卡周?chē)O(shè)置一個(gè)容器，而是編寫(xiě)一個(gè)規(guī)則：

 @Container（最小寬度：300px）{
  ?？ㄆ?{
    顯示：Flex;
    彈性方向：行；
  }
}

@Container（最大寬度：299px）{
  ?？ㄆ?{
    撓性方向：列；
  }
}

現(xiàn)在，相同的組件可以在任何地方進(jìn)行調(diào)整 - 沒(méi)有額外的JS，沒(méi)有腫的框架。

另一個(gè)很棒的用例是版式縮放。是否希望文本在空間允許的情況下在容器中稍微生長(zhǎng)？是的，您也可以做到。

提防瀏覽器支持

目前，在Chrome，Edge和Safari等現(xiàn)代瀏覽器中，集裝箱查詢(xún)得到了很好的支持。 Firefox在國(guó)旗（ layout.css.containerQueries.enabled ）后面支持他們，因此還不是很普遍。

如果您要針對(duì)較舊的環(huán)境或今天需要完全兼容性，則可能仍然可以使用媒體查詢(xún)或基于公用事業(yè)的系統(tǒng)（例如Tailwind）。但是，如果您是為現(xiàn)代瀏覽器構(gòu)建的，或者不介意漸進(jìn)式增強(qiáng)功能，那么容器查詢(xún)就可以安全地開(kāi)始實(shí)驗(yàn)。

另外，請(qǐng)記住， container-type: size （可以讓您查詢(xún)寬度和高度）仍然是實(shí)驗(yàn)性的，因此請(qǐng)堅(jiān)持使用inline-size除非您可以使用某些不穩(wěn)定。

基本上就是這樣。一旦您掌握了容器的查詢(xún)，就不會(huì)復(fù)雜，但是它們?cè)诮M件驅(qū)動(dòng)的設(shè)計(jì)中開(kāi)辟了一個(gè)全新的靈活性。

以上是有關(guān)集裝箱查詢(xún)的現(xiàn)代CSS教程的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！