容器查詢可傳送至穩定版瀏覽器

今年情人節,我們將慶祝在所有穩定瀏覽器中到達的容器查詢和容器查詢單元。

快開始對容器查詢愛不釋手!今年情人節,大小容器查詢和容器查詢單元在所有新版瀏覽器中都穩定運作。

瀏覽器支援

  • 105
  • 105
  • 110
  • 16

來源

使用容器查詢,您可以查詢父項元素 (例如 inline-size) 的樣式資訊。透過媒體查詢,您可以查詢可視區域的大小,容器查詢可讓元件在使用者介面中的位置變動。

媒體查詢與容器查詢

如果是回應式設計和可重複使用的元件,容器查詢特別實用。例如,啟用某個資訊卡元件後,在側欄中放置於該元件,同時在產品格線的不同設定中配置該元件。

使用容器查詢

如要使用容器查詢,請先對父項元素設定納入,方法是在父項容器上設定 container-type,或使用 container 簡寫來同時為其提供類型和名稱:

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

container-type 設為 inline-size,會查詢父項的內嵌方向大小。以英文等拉丁語言來說,這為資訊卡的寬度,因為文字會由左至右內嵌。

現在,您可以使用該容器,使用 @container 將樣式套用至其任何子項:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

此外,您可以使用容器查詢長度單位值,就像使用可視區域單位值一樣。容器單元指的是容器單元,而不是可視區域。下例示範如何使用容器查詢單元和 clamp() 函式,提供大小下限和大小上限的回應式字體排版:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

上述 15cqi 是指容器內嵌大小的 15%。clamp() 函式的最小值為 2,最大值是 4rem。在此期間,如果 15cqi 在這些值之間,文字會縮小,並對應變長。

容器查詢 Valentine

為慶祝佳節將來,我們特別打造了一份情人節,讓大家無論使用哪個 (最新版) 穩定瀏覽器,都愛不釋手!