簡化響應式佈局的現代 CSS 功能

過去建立響應式佈局意味著無盡的媒體查詢、清除浮動和脆弱的百分比計算。你必須寫十幾個斷點，只是為了防止卡片在平板電腦上溢出。現代 CSS 已經改變了這一點。像容器查詢、clamp() 和 CSS grid 這樣的功能，讓你編寫的佈局能夠適應其上下文——而不僅僅是視口——並且程式碼量大大減少。

為什麼傳統響應式設計感覺失靈

經典方法依賴於基於視口的斷點。你檢查螢幕寬度，然後為每個範圍覆寫樣式。這對於頁面層級的佈局有效，但對於可重複使用的元件則行不通。側邊欄中的卡片可能寬 300px，而主欄中的相同卡片寬 800px。視口媒體查詢無法區分——它們只知道螢幕尺寸。

浮動和 clearfix 技巧又增加了一層複雜性。即使使用 flexbox，開發人員也經常編寫多餘的規則來處理邊緣情況。結果：CSS 臃腫、行為不可預測，以及維護上的麻煩。

容器查詢：響應父容器而非視口

容器查詢是自媒體查詢以來響應式設計中最大的變革。你不再問「螢幕有多寬？」，而是問「我的容器有多寬？」。這使得元件真正可重複使用。

要使用它們，請用 container-type 定義包含上下文，然後編寫 @container 規則：

.card-wrapper {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

現在，當卡片容器寬度至少為 400px 時，卡片會切換為水平佈局，無論視口如何。將其放入狹窄的側邊欄中，它會堆疊；放入寬闊的主欄中，它會並排顯示。無需額外的類別，無需 JavaScript。

何時使用容器查詢與媒體查詢

• 容器查詢：適用於出現在多個上下文中的元件（卡片、小工具、導航區塊）。
• 媒體查詢：適用於頁面層級的佈局變更（整體網格、頁首/頁尾、列印樣式）。

使用 clamp() 和 min()/max() 實現流體尺寸

固定斷點會產生跳躍。clamp() 讓你在一行中定義最小值、首選值和最大值：

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

標題會隨視口平滑縮放，永遠不會小於 1.5rem 或大於 3rem。無需媒體查詢。你可以對內距、外距甚至網格間隙使用相同的技術。

min() 和 max() 同樣有用。例如，width: min(100% - 2rem, 1200px) 建立一個居中容器，在小螢幕上永遠不會觸及邊緣。

CSS Grid：無需斷點的內在佈局

CSS grid 提供了兩個強大的響應式設計函數：auto-fit 和 minmax()。結合使用，它們建立一個自動換行的響應式網格：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

這一條規則產生的欄數與能容納的數量一樣多，每欄至少 250px 寬。在手機上，你得到一欄；在桌面上，四欄或更多。無需媒體查詢，無需 JavaScript。

為了更精細的控制，grid-template-areas 讓你定義命名區域，並在不同斷點以最少的程式碼重新排列它們。

使用 Subgrid 對齊嵌套元素

Subgrid 解決了一個長期存在的問題：跨不同網格項目對齊子元素。如果你有一排帶有頁首、內容和頁尾的卡片，你會希望頁首對齊。Subgrid 讓子網格繼承父網格的軌道：

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

現在所有卡片共享相同的行高，保持內容對齊，無需固定高度或 JavaScript。

Aspect-Ratio：不再需要內距技巧

在 aspect-ratio 之前，維持 16:9 的盒子需要 padding-bottom 技巧。現在只需一個屬性：

.video-thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

這適用於圖像、影片和任何容器。它對於響應式媒體網格特別方便。

用於國際化的邏輯屬性

像 margin-inline、padding-block 和 inset-inline-start 這樣的邏輯屬性取代了物理方向（左、右、上、下）。它們會自動適應書寫模式，因此你的佈局無需額外 CSS 就能在 RTL 語言中運作。例如，margin-inline: auto 在 LTR 和 RTL 上下文中都會將區塊水平居中。

比較：舊技術 vs 現代技術

整合運用：一個響應式卡片元件

讓我們建立一個能適應其容器、使用流體間距並保持媒體長寬比的卡片：

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: 4px;
}

@container (min-width: 500px) {
  .card {
    grid-template-columns: 200px 1fr;
    align-items: center;
  }
}

這個元件可以在任何上下文中運作——側邊欄、主內容或模態框——無需任何媒體查詢。

瀏覽器支援與後備方案

容器查詢在所有現代瀏覽器中都受支援（Chrome 105+、Firefox 110+、Safari 16+）。clamp()、grid 和 aspect-ratio 的支援更廣泛。對於較舊的瀏覽器，你可以使用 @supports 提供後備方案：

@supports not (container-type: inline-size) {
  .card {
    display: flex;
    flex-wrap: wrap;
  }
}

實際上，大多數專案現在都可以以最小的風險採用這些功能。

常見問題

什麼是容器查詢，它們與媒體查詢有何不同？

容器查詢讓你根據父容器的大小來設定元素樣式，而媒體查詢則響應視口大小。容器查詢非常適合出現在不同佈局上下文中的可重複使用元件。

我可以使用 clamp() 來實現響應式間距嗎？

是的。clamp() 適用於任何長度值，包括內距、外距和間隙。它提供無需斷點的流體縮放，非常適合響應式間距系統。

現代 CSS 功能會完全取代媒體查詢嗎？

不會。媒體查詢對於頁面層級的佈局變更和列印樣式仍然有用。像容器查詢和 clamp() 這樣的現代功能是對它們的補充，減少了對許多斷點的需求，但並未完全消除它們。

準備好測試你的響應式 CSS 了嗎？使用 HTML 轉圖片轉換器 快速擷取不同尺寸的佈局截圖，並驗證它們如何適應。