[筆記] CSS @container 容器查詢

1 月 25, 2025

—

容器查詢 (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

更多 chrome for develops 的範例

瀏覽器支援

目前瀏覽器支援 can i use

css