確認查詢容器設定正確
元件要有預期的 container-type,複雜頁面可用 container-name 避免查詢到錯誤祖先。先在開發工具確認實際容器及其寬度,再判斷樣式為何觸發。
.card-grid {
container: cards / inline-size;
}
@container cards (min-width: 42rem) {
.card { grid-template-columns: 12rem 1fr; }
}測試邊界前後而不是只測裝置
若元件在 672px 改版,至少測試 671、672 和 673px。再把它放入主欄、側欄、彈窗和分割畫面,確認同一個 viewport 下能根據容器正確呈現。
Viewport Studio 的自訂尺寸可找出頁面何時令容器跨過邊界,但容器實際寬度仍應在瀏覽器開發工具核對。
用內容壓力找出錯誤
短英文標題通過不代表元件穩定。加入較長的繁中、英文和日文標題、缺少圖片、超長標籤、價格折扣及錯誤狀態,觀察元件是否在查詢邊界附近反覆跳動。
- 一行與三行標題
- 有圖、無圖和圖片載入失敗
- 零個、一個和多個操作按鈕
- 右至左語言或較長翻譯
留意巢狀容器和循環依賴
巢狀元件可能意外參照最近的未命名容器。避免讓查詢結果改變容器本身尺寸,繼而造成不穩定切換。以清楚命名和單一責任減少難以追蹤的依賴。
準備合理的基礎版面
先寫一個沒有 Container Queries 仍可閱讀和操作的基礎版面,再逐步增強。測試舊版瀏覽器或功能被停用時,內容順序、按鈕和表格不應消失。