本文目錄導(dǎo)讀：

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

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

---

容器查詢（Container Queries）

1 什么是容器查詢？

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

2 容器查詢的基本語(yǔ)法

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

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

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

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

3 容器查詢的應(yīng)用場(chǎng)景

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

4 瀏覽器兼容性

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

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

---

CSS層疊變量（CSS Custom Properties）

1 什么是CSS層疊變量？

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

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

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

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

3 動(dòng)態(tài)調(diào)整CSS變量

CSS變量可以在運(yùn)行時(shí)通過(guò)JavaScript動(dòng)態(tài)修改：

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

4 結(jié)合容器查詢使用

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

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

---

實(shí)戰(zhàn)：結(jié)合容器查詢與CSS變量?jī)?yōu)化響應(yīng)式布局

1 示例：自適應(yīng)卡片組件

假設(shè)我們有一個(gè)卡片組件,需要在不同容器寬度下調(diào)整布局和樣式：

HTML結(jié)構(gòu)：

<div class="card-container">
  <div class="card">
    <h3>卡片標(biāo)題</h3>
    <p>卡片內(nèi)容...</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 示例：動(dòng)態(tài)主題切換

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

HTML：

<button id="theme-toggle">切換主題</button>
<div class="card">這是一個(gè)卡片</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');
});

---

總結(jié)與展望

容器查詢和CSS層疊變量是響應(yīng)式設(shè)計(jì)的重要進(jìn)階技術(shù)，它們提供了更靈活、更高效的樣式控制方式：

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

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

---

參考資料

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

希望本文能幫助你掌握響應(yīng)式設(shè)計(jì)的進(jìn)階技巧，歡迎在評(píng)論區(qū)交流討論！??