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