CSS Container Queries 能讓組件根據(jù)其容器尺寸而非視口來響應變化，解決了傳統(tǒng)媒體查詢在組件化開發(fā)中的局限性。①通過設置 container-type: inline-size 或簡寫 container: card / inline-size，將父元素定義為查詢容器并可命名；②使用 @container card (min-width: 400px) 語法，當容器寬度達到指定條件時應用樣式，實現(xiàn)如卡片從垂直布局切換為橫向布局；③該機制使同一組件在不同容器中自適應展示，適用于網格布局、組件庫和 CMS 系統(tǒng)；④截至 2024 年中，Chrome 105 、Safari 16.4 、Edge 105 已支持，F(xiàn)irefox 110 需啟用實驗性功能，建議結合 Can I Use 檢查兼容性。正確使用 container 和 @container 可構建真正自適應容器的響應式 UI 組件。

CSS Container Queries 是一種讓組件根據(jù)其容器的尺寸而不是整個視口來響應變化的機制。相比傳統(tǒng)的媒體查詢（@media），容器查詢更適合構建可復用的響應式組件。

下面是一個簡單的 CSS Container Queries 示例，展示如何使用它創(chuàng)建一個卡片組件，根據(jù)容器寬度決定布局。

? 基本用法示例：卡片布局切換

HTML

<div class="card-container">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="CSS容器查詢示例" />
    <div class="content">
      <h3>標題</h3>
      <p>這是一段描述文字。</p>
    </div>
  </div>
</div>

<div class="card-container wide">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="CSS容器查詢示例" />
    <div class="content">
      <h3>另一個標題</h3>
      <p>這段文字在更寬的容器中顯示為橫向布局。</p>
    </div>
  </div>
</div>

CSS

/* 第一步：定義一個容器（啟用容器查詢的關鍵） */
.card-container {
  container-type: inline-size; /* 啟用基于寬度的容器查詢 */
}

/* 或者使用簡寫語法（推薦） */
.card-container {
  container: card / inline-size; /* 命名為 'card' 的容器，監(jiān)聽內聯(lián)方向尺寸 */
}

/* 默認窄版：垂直堆疊 */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-family: sans-serif;
}

.card img {
  width: 100%;
  height: auto;
}

.card .content {
  padding: 16px;
}

/* 當容器寬度 >= 400px 時，切換為橫向布局 */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card img {
    width: 50%;
    height: auto;
  }

  .card .content {
    padding: 20px;
  }
}

? 解釋關鍵點

• container-type: inline-size;
  表示該元素成為一個查詢容器，僅監(jiān)聽其內聯(lián)方向尺寸（通常是寬度）。

  

• container: card / inline-size;
  是簡寫語法，給容器命名為 card，便于在多個查詢中區(qū)分不同容器。

• @container card (min-width: 400px)
  只有當名為 card 的容器寬度 ≥ 400px 時，里面的樣式才生效。

  

• 不再依賴屏幕寬度，而是組件父容器的寬度 —— 更適合組件化開發(fā)（如在側邊欄或主內容區(qū)中表現(xiàn)不同）。

? 實際應用場景

• 網格布局中的卡片，根據(jù)所在列寬自動調整顯示方式
• 組件庫中可復用的按鈕組、導航欄等響應式封裝
• 在 CMS 或布局系統(tǒng)中，同一組件在不同區(qū)域呈現(xiàn)不同形態(tài)

?? 瀏覽器兼容性（截至 2024 年中）

支持情況良好，但需注意：

• Chrome 105 ?
• Firefox 110 （需啟用 layout.css.container-queries.enabled）??
• Safari 16.4 ?
• Edge 105 ?

建議使用時檢查 Can I Use - Container Queries

基本上就這些。用好 container 和 @container，你可以寫出真正“自適應容器”的 UI 組件，而不只是“自適應屏幕”。

以上是CSS容器查詢示例的詳細內容。更多信息請關注PHP中文網其他相關文章！