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

此摘錄摘自釋放CSS 的功能，探討了在製作可自動且有彈性的Web組件中容器查詢的變換潛力。 與對整個瀏覽器窗口大小做出反應的視口媒體查詢不同，容器查詢允許基於元素的造型，從而啟用真正的組件級響應率。 [2 [2 傳統的基於視口的響應設計依賴於與簡化的設備尺寸（移動，平板電腦，台式機）綁定的斷點，通常與佈局網格相結合。 這種方法與各個組件適應性鬥爭；較大的元素可能會分別進行調整，但通常遵循全局斷點。

容器查詢提供了出色的解決方案。 以下圖像演示了具有容器查詢樣式的卡組件，完全獨立於視口尺寸。 該卡的外觀動態適應其可用空間。 [2 注意：由於Firefox 110，因此存在對容器查詢的廣泛瀏覽器支持。 polyfills可用於較舊的瀏覽器。

（等效於水平寫作模式中的寬度）是最常見且受廣泛支持的值：

接下來，使用

at-rule來定義查詢。 下面的示例將顏色設置為藍色40ch寬或更大時的顏色：

對於在寫作模式中更廣泛的兼容性，請使用邏輯屬性：

超越

block-size 。請諮詢官方規範以獲取更多詳細信息。 沒有容器查詢，卡片變化通常涉及與視口斷點相關的修改器類。 下圖顯示了三個卡尺寸及其相應的類。 [2 [CODEPEN DEMO：viewport Media查詢卡]（鏈接到Codepen）

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

600px或更大：圖像作為背景 [2 [Codepen演示：卡片的容器查詢]（鏈接到Codepen）

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

與觀看媒體查詢相比，它們為響應式設計提供了一種更靈活，更精細的方法。 （注意：替換為codepen link to codepen”，如果可用，則用實際的codepen鏈接。