CSS中的容器查詢簡介

> CSS容器查詢：革新響應式設計>

本摘錄摘自

釋放CSS的功率探索容器查詢在製作適應性和彈性的Web組件中的變換潛力。 與對整個瀏覽器窗口大小做出反應的視口媒體查詢不同，容器查詢允許基於元素的可用空間造型，從而啟用了真正的組件級響應率。

容器查詢與視口媒體查詢

> >傳統的基於視口的響應設計依賴於與簡化的設備尺寸（移動，平板電腦，台式機）綁定的斷點，通常與佈局網格相結合。 這種方法與各個組件適應性鬥爭；較大的元素可能會分別進行調整，但通常遵循全局斷點。 >

>容器查詢提供了出色的解決方案。 以下圖像演示了具有容器查詢樣式的卡組件，完全獨立於視口尺寸。 該卡的外觀動態適應了其可用空間。

>注意：自Firefox 110以來，存在對容器查詢的廣泛支持。 polyfills可用於舊瀏覽器。

定義容器查詢

>使用容器查詢，首先將元素聲明為使用

>屬性的容器。 （相當於水平寫作模式中的寬度）是最常見且受到廣泛支持的值：>

接下來，採用 attrule來定義查詢。 下面的示例將容器的寬度為40ch或更大時，將其

顏色設置為藍色： container-type inline-size>對於跨寫作模式的更廣泛的兼容性，請使用邏輯屬性：>

<code class="language-css">.container {
  container-type: inline-size;
}</code>

超越

，選項包括@container>和h2。請諮詢官方規範以獲取更多詳細信息。

<code class="language-css">@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}</code>

>升級卡組件：一個實踐示例

<code class="language-css">@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}</code>

>

>無容器查詢，卡片變化通常涉及與視口斷點相關的修改器類。 下圖展示了三個卡尺寸及其相應類的圖像。 inline-size> block-sizeaspect-ratio

[codepen演示：視口媒體查詢卡]（鏈接到codepen） 使用容器查詢，我們維護默認的卡樣式（用於未支撐的瀏覽器），並根據容器寬度定義其他樣式：

• 350px或更大：水平佈局
• 600px或更高：圖像為背景
>

[codepen演示：卡片的容器查詢]（鏈接到Codepen）

此摘錄來自>釋放CSS的功能：用於響應式用戶界面的高級技術，可在SitePoint Premium上獲得。

鑰匙要點：

>集裝箱查詢提供組件級響應能力。
它們是使用
• 和container-type>的定義的。 @container邏輯屬性增強了交叉寫模式的兼容性。
• >他們提供了一種比視口媒體查詢更靈活，更精細的響應設計方法。
>

（注意：如果有的話，用實際的Codepen鏈接替換為“鏈接到Codepen”。）

以上是CSS中的容器查詢簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！