容器查詢 (container query) 可讓元件根據 UI 中的位置進行變更。要使用容器查詢，要先在父元素上設定容納值。設定父項容器的 container-name，及 container-type ，或是使用 container 速記法，同時提供類型和名稱
.card-container {
container: card / inline-size; /* 名稱及類型 */
}
@container card (width > 400px) and (height > 400px) {
/* <stylesheet> */
}
@container card (width > 400px) or (height > 400px) {
/* <stylesheet> */
}
@container card not (width < 400px) {
/* <stylesheet> */
}
codepen 筆記
.status-layout 中定義 container，在符合設定的尺寸中，將樣式套用至任何子項
範例程式碼
如果容器 bpdpSection 的寬度下限為 744 像素，.bpdpCardContainer 和 .subTxt, .bpdpAddress 所選元件的 font-size 和 line-height 會更新。
在以下範例中，.bpdpCardWrapper 是名為 bpdpSection 的父項容器。
// Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
以上範例程式碼出處 chrome for develops
瀏覽器支援
目前瀏覽器支援 can i use