本文目錄導讀：

1. 引言
2. 1. 容器查詢（Container Queries）
3. 2. CSS層疊變量（CSS Custom Properties）
4. 3. 實戰(zhàn)：結合容器查詢與CSS變量優(yōu)化響應式布局
5. 4. 總結與展望
6. 5. 參考資料

隨著前端技術的不斷發(fā)展，響應式設計（Responsive Design）已成為現(xiàn)代網(wǎng)頁開發(fā)的核心要素，傳統(tǒng)的響應式設計主要依賴于媒體查詢（Media Queries），通過檢測視口（Viewport）寬度來調整布局，這種方法存在一定的局限性，尤其是在處理組件級別的自適應時顯得不夠靈活，近年來，CSS 新增的兩項重要特性——容器查詢（Container Queries）和CSS 層疊變量（CSS Custom Properties），進一步提升了響應式設計的靈活性和可維護性，本文將深入探討這兩項技術的原理、應用場景及實踐方法,幫助開發(fā)者掌握更高級的響應式設計技巧。

---

容器查詢（Container Queries）

1 什么是容器查詢？

容器查詢允許開發(fā)者基于父容器（Container）的尺寸而非視口尺寸來調整子元素的樣式，這與傳統(tǒng)的媒體查詢不同，媒體查詢只能基于瀏覽器窗口大小進行調整,而容器查詢則讓組件能夠根據(jù)其所在容器的可用空間自適應。

2 容器查詢的基本語法

要使用容器查詢，首先需要定義一個容器元素，并設置 container-type 屬性：

.card-container {
  container-type: inline-size; /* 基于寬度變化 */
}

使用 @container 規(guī)則定義子元素的響應式樣式：

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

3 容器查詢的應用場景

• 卡片組件自適應：卡片在窄容器內垂直排列,在寬容器內水平排列。
• 側邊欄布局優(yōu)化：側邊欄在不同寬度下調整內容展示方式。
• 網(wǎng)格布局調整：網(wǎng)格項在容器變小時自動減少列數(shù)。

4 瀏覽器兼容性

截至2023年，主流瀏覽器（Chrome、Edge、Firefox、Safari）均已支持容器查詢，但仍需關注舊版本兼容性，可通過 @supports 檢測支持情況：

@supports (container-type: inline-size) {
  /* 容器查詢支持時的樣式 */
}

---

CSS層疊變量（CSS Custom Properties）

1 什么是CSS層疊變量？

CSS層疊變量（也稱為CSS變量或自定義屬性）允許開發(fā)者在樣式表中定義可復用的值，并在整個文檔中動態(tài)修改,其語法如下：

:root {
  --primary-color: #3498db;
  --spacing: 1rem;
}
.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

2 CSS變量的優(yōu)勢

1. 提高可維護性：通過修改變量值,可以全局調整樣式。
2. 動態(tài)主題切換：結合JavaScript，可實現(xiàn)暗黑模式、用戶自定義主題等功能。
3. 減少重復代碼：避免硬編碼顏色、間距等值。

3 動態(tài)調整CSS變量

CSS變量可以在運行時通過JavaScript動態(tài)修改：

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

4 結合容器查詢使用

CSS變量可以與容器查詢結合,實現(xiàn)更靈活的組件樣式調整：

.card-container {
  container-type: inline-size;
  --card-bg: #f1f1f1;
}
@container (min-width: 500px) {
  .card {
    --card-bg: #e1e1e1;
  }
}

---

實戰(zhàn)：結合容器查詢與CSS變量優(yōu)化響應式布局

1 示例：自適應卡片組件

假設我們有一個卡片組件,需要在不同容器寬度下調整布局和樣式：

HTML結構：

<div class="card-container">
  <div class="card">
    <h3>卡片標題</h3>
    <p>卡片內容...</p>
  </div>
</div>

CSS樣式：

.card-container {
  container-type: inline-size;
  --card-padding: 1rem;
  --card-direction: column;
}
.card {
  padding: var(--card-padding);
  display: flex;
  flex-direction: var(--card-direction);
  gap: 1rem;
  background: var(--card-bg, #f9f9f9);
}
@container (min-width: 500px) {
  .card-container {
    --card-padding: 2rem;
    --card-direction: row;
    --card-bg: #eef;
  }
}

2 示例：動態(tài)主題切換

結合CSS變量,我們可以輕松實現(xiàn)主題切換功能：

HTML：

<button id="theme-toggle">切換主題</button>
<div class="card">這是一個卡片</div>

CSS：

:root {
  --bg-color: #fff;
  --text-color: #333;
}
[data-theme="dark"] {
  --bg-color: #222;
  --text-color: #fff;
}
.card {
  background: var(--bg-color);
  color: var(--text-color);
}

JavaScript：

const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
  document.documentElement.toggleAttribute('data-theme');
});

---

總結與展望

容器查詢和CSS層疊變量是響應式設計的重要進階技術，它們提供了更靈活、更高效的樣式控制方式：

• 容器查詢：讓組件能夠基于父容器尺寸自適應,減少對媒體查詢的依賴。
• CSS變量：提升代碼可維護性,支持動態(tài)主題切換和運行時樣式調整。

隨著CSS新特性的不斷涌現(xiàn)（如:has()選擇器、CSS嵌套等），響應式設計將變得更加智能和高效，開發(fā)者應持續(xù)關注最新標準,以構建更優(yōu)秀的Web體驗。

---

參考資料

1. MDN - CSS Container Queries
2. CSS Custom Properties (Variables)
3. Can I Use: Container Queries

希望本文能幫助你掌握響應式設計的進階技巧，歡迎在評論區(qū)交流討論！??