今年情人節,我們將慶祝在所有穩定瀏覽器中到達的容器查詢和容器查詢單元。
快開始對容器查詢愛不釋手!今年情人節,大小容器查詢和容器查詢單元在所有新版瀏覽器中都穩定運作。
使用容器查詢,您可以查詢父項元素 (例如 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
為慶祝佳節將來,我們特別打造了一份情人節,讓大家無論使用哪個 (最新版) 穩定瀏覽器,都愛不釋手!