如果你交付的是靜態官網、活動落地頁或設計系統裡的卡片元件，只按視口寬度寫 @media 常常失真：全屏預覽沒問題，卡片一旦塞進窄側欄或雙列柵格就溢位版心。CSS 容器查詢（@container）讓佈局跟隨「父級盒子」而不是整頁寬度。2026 年對以 Safari 為準入標準的團隊來說，只要目標包含 Safari 16 及以上，就可以在新專案裡放心採用，並應在真實 macOS Safari 上覆測——可與本站 Safari 技術預覽版與穩定版對比 一文搭配閱讀。
元件斷點與視口斷點的本質區別
傳統響應式假設「手機窄、桌面寬」，但同一套價格表可能同時出現在 1200px 主欄與 320px 抽屜裡。用視口斷點要為每種擺放寫一套類名，維護成本隨頁面組合指數上升。容器查詢把規則寫成「當這個包裝元素的內聯尺寸小於某值時，子元素改為一列」——與設計稿裡「卡片元件」的思維一致，而不是與「整頁斷點」強行繫結。
WebKit 在 flex、grid 與字型渲染上仍與 Chromium 存在細微差異；容器查詢不能消除這些差異，但能減少「側欄裡仍按桌面斷點排版」導致的意外折行。若你使用 Vite 7 與 Tailwind CSS v4 流水線，可把容器查詢與原子類並存：外層柵格用視口，內層卡片用 @container。
2026 年常用語法與命名
最小可用寫法分兩步：父級建立查詢上下文，子級寫條件規則：
.card-wrap {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 32rem) {
.card-inner { flex-direction: row; }
}container-name 在巢狀佈局（例如帶目錄的文件頁裡再嵌登錄檔單）中可避免選擇器誤命中。只有當你確實要按高度切換佈局時才使用 container-type: size，並記得給容器明確的塊級高度，否則查詢條件可能永遠不觸發——這是初學者最常見的坑之一。
從工具類框架遷移時，建議把側欄、彈層、儀表內嵌元件優先改為容器查詢，頁首頁尾仍保留 @media；在樣式指南里寫清「哪些 Figma 畫板對應視口規則、哪些對應容器規則」，避免趕工時又用視口斷點把元件寫死。
Safari/WebKit 支援與版本事實
- Safari 16.0（2022 年 9 月，iOS 16 / macOS Ventura）起，尺寸類容器查詢在穩定版可用，適合寫入 2026 年新站相容矩陣。
- 需要試用
cqw等單位或更新的佈局特性時，可裝 Safari Technology Preview，但對外簽字仍應以穩定版為準，詳見上文 STP 對比文。 - 純靜態託管通常不為容器查詢做 JS polyfill；舊內嵌 WebView 使用者佔比若高於約 5%，應為關鍵模組保留單列兜底，而不是強行追求畫素級一致。
在 README 或設計系統文件中寫明「最低 Safari 版本」與「容器查詢兜底策略」，可減少外包同事在不知情下回退到純視口方案。
決策表：何時用 @container 與 @media
| 場景 | 優先方案 | 原因 |
|---|---|---|
| 根字號、整頁邊距 | @media | 閱讀舒適度仍由視口決定。 |
| 柵格內複用卡片、側欄模組 | @container | 寬度由柵格列寬決定，與手機/桌面二元劃分無關。 |
| 列印樣式 | @media print | 列印邏輯與容器查詢正交。 |
| 固定高度儀表塊 | @container + size | 縱橫兩向都參與佈局時需 size 與明確高度。 |
| 全寬營銷首屏 | 混合 | 視口限制最大寬度，內部促銷條仍可用容器細分。 |
靜態站點、零 JS 與構建鏈
Eleventy、Hugo 等生成器輸出的純 CSS 可直接包含 @container，無需 webpack 也能上線。PostCSS 8.4 以後預設透傳該規則，不像早年 Grid 需要字首。效能上，瀏覽器在佈局階段計算容器；單頁若堆疊上百個深層巢狀容器，在低端 iPhone 上可能增加約 數毫秒 佈局時間——營銷站常見 20～40 個命名容器通常遠低於瓶頸，優先最佳化長列表虛擬化比糾結查詢條數更有意義。
無障礙要求不變：在容器斷點切換佈局時須檢查 Tab 順序與可見標籤，配合 macOS「旁白」抽查焦點是否跳躍。容器查詢不是省略鍵盤測試的藉口。
在雲 Mac mini 上的驗收步驟
透過 SSH 或 VNC 登入租用的 macOS 環境，用 Safari 開啟頁面，啟用響應式設計模式並配合 Web Inspector 觀察元件區域寬度變化——不要只拖瀏覽器外框。建議歸檔 1440×900 與 390×844 兩種錄屏作為迴歸基線。Apple Silicon Mac mini 靜音、功耗低，適合作為專職 WebKit 驗收機，避免為每個外包配實體筆記本。
當 CI 只跑 Chromium 時，雲 Mac 能補齊「簽字前最後一道 Safari」缺口；與本地編輯器解耦，你只把構建產物同步上去即可。
建議在迭代分支上為每個大元件維護一張「容器寬度—佈局狀態」對照表，例如 360px、480px、640px 三檔截圖，方便設計與工程對齊；合併前由負責人在租用機器上勾選簽字，可減少線上環境與設計稿不一致的扯皮。若團隊分散在不同時區，可把雲 Mac 賬號與錄屏連結寫進發布 checklist，保證每人複用同一套驗收環境。
常見問題
容器查詢會完全替代媒體查詢嗎？
不會。整頁字號、全寬導航等仍適合 @media；側欄與柵格內複用卡片更適合 @container。
Safari 從哪一版支援 @container？
Safari 16.0 起支援；若仍需覆蓋 Safari 15，應為關鍵佈局提供 flex 等兜底。
container-type 選 inline-size 還是 size？
多數靜態頁用 inline-size 即可；需要同時依據高度變化時再選 size 並顯式管理高度。
無論是多語言文件站還是高轉化落地頁，容器查詢讓 CSS 與元件在頁面中的真實佔位一致。Apple Silicon Mac mini 在靜音、低待機功耗和完整 macOS 生態之間平衡良好，原生 Safari 與色彩管理對前端驗收仍具不可替代性。MacHTML 提供物理 Mac mini 雲端租賃，支援 SSH/VNC，可按專案開啟與縮容，避免為短期活動採購硬體閒置。