容器查詢允許基於容器的尺寸的造型元素，這與依賴視口的媒體查詢不同。 1。媒體查詢針對視口，是全球佈局變化的理想選擇，但缺乏對不同佈局中各個組件的控制。 2。集裝箱查詢針對組件的容器，通過基於可用空間調(diào)整樣式在組件級別啟用響應式設計。 3。它們在佈局邊界內(nèi)工作，需要使用容器類型定義圍欄上下文。 4。瀏覽器對容器查詢的支持正在增長，而媒體查詢得到了廣泛支持。 5。這兩種工具都相互補充，媒體查詢處理寬布佈局偏移和容器查詢，以管理本地響應能力，從而增強了靈活的UI設計。

容器查詢是一種基於容器的大小而不是媒體查詢（例如媒體查詢）的大小來設計元素的方法。當構建需要根據(jù)佈局中出現(xiàn)的位置進行適應的模塊化組件時，這為開發(fā)人員提供了更多的控制。

什麼是媒體查詢？

媒體查詢已經(jīng)存在了一段時間，讓您根據(jù)屏幕寬度，設備方向或分辨率等內(nèi)容應用樣式。最常見的是，它們用於調(diào)整不同屏幕尺寸的佈局 - 想想移動與桌面視圖。

例如：

 @Media（最大寬度：600px）{
  。卡片 {
    撓性方向：列；
  }
}

當視口狹窄時，這會改變。 .card外觀。但是，如果您希望將同一張卡放置在側(cè)邊欄中而不是全寬部分時，該怎麼辦？那就是媒體查詢?nèi)狈Φ牡胤健?/p>

• 他們只響應瀏覽器窗口的大小
• 對於不同佈局內(nèi)的可重複使用組件並不理想
• 無法範圍樣式到頁面的特定部分

什麼是容器查詢？

容器查詢可讓您定義對父容器大小反應的樣式。這意味著組件可以根據(jù)實際給出的空間（而不僅僅是整個屏幕）來改變外觀。

首先，要使用它們，您需要使用container-type屬性來定義圍護上下文：

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

然後，您可以編寫這樣的查詢：

 @container（最大寬度：300px）{
  ?？ㄆ?{
    字體大小：14px;
  }
}

現(xiàn)在，當它的容器寬300px寬時， .card將更改樣式 - 無論頁面上的位置如何。

• 在佈局邊界內(nèi)工作，而不僅僅是屏幕尺寸
• 非常適合動態(tài)佈局中的響應式組件
• 仍然相對較新，需要現(xiàn)代瀏覽器支持

容器查詢和媒體查詢之間的關鍵差異

這是這兩個工具的比較：

• 目標：

  • 媒體查詢針對視口
  • 容器查詢針對組件的容器

• 用例：

  • 媒體查詢是用於全局佈局更改的
  • 容器查詢適用於本地組件級響應能力

• 控制：

  • 有了媒體查詢，您並不總是知道如何佈置組件
  • 集裝箱查詢使組件更具自主性和靈活性

• 瀏覽器支持：

  • 媒體查詢得到廣泛支持
  • 集裝箱查詢是更新的，並且仍在採用（但在大多數(shù)現(xiàn)代瀏覽器中已經(jīng)起作用）

您什麼時候應該使用？

實際上，您可能會一起使用兩者。例如：

• 使用媒體查詢在移動和桌面導航之間切換
• 使用集裝箱查詢，以使這些佈局內(nèi)部的卡或小部件根據(jù)可用空間平穩(wěn)調(diào)整

他們解決了不同的問題，但在復雜的UI中相互補充。

基本上，集裝箱查詢通過讓組件根據(jù)周圍的周圍環(huán)境做出決策來打開新的響應式設計，而不僅僅是整個屏幕。從概念上講，這是一個很小的轉(zhuǎn)變，但就靈活性而言，這是一個很大的轉(zhuǎn)變。

以上是什麼是集裝箱查詢，它們與媒體查詢有何不同？的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！