CSS Container Query
產生器
一款視覺化的 CSS @container 容器查詢產生器。透過 GUI 直覺設定 container-type/name 與斷點，內建 6 種實用預設版型並支援即時拖曳預覽，更提供一鍵轉換 Media Query 工具。免註冊，完全在您的瀏覽器內運行。
容器設定 (Container Settings)
預設版型 (Presets)
斷點設定 (Breakpoints)
即時預覽 (Live Preview)
輸出的 CSS 程式碼
🔄 轉換工具：Media Query → Container Query
關於 CSS Container Query 產生器
「CSS Container Query 產生器」是一款專為網頁前端開發者設計的實用工具。它讓您可以透過圖形化介面 (GUI)，直覺地建構出現代網頁設計的最新標準 ——「容器查詢 (@container)」。
傳統的 Media Query 只能根據「瀏覽器視窗 (Viewport) 的寬度」來改變排版，而 Container Query 則突破了這個限制，它能夠根據「父層容器的寬度」來切換樣式，實現真正意義上模組化、可重複使用的組件化設計。本工具完美處理了複雜的 container-type/name 設定，並提供即時預覽互動功能。同時內建的批次轉換器，能幫助您無痛將舊專案的 Media Query 升級為新的規範。
使用方法
設定容器與新增斷點
輸入容器的 CSS 選擇器，並設定 container-type (通常使用 inline-size 即可)。接著點擊「新增斷點」，輸入當容器達到特定尺寸時，要套用的子元素 CSS 樣式。您也可以直接從預設版型開始。
即時預覽與測試
使用滑鼠拖曳預覽區塊的右側邊緣，模擬容器寬度縮放的過程，即時驗證斷點是否如預期般觸發並切換樣式。您也可以貼上自己專案中的 HTML 結構來進行真實測試。
匯出與語法轉換
確認無誤後，一鍵複製產生的 CSS 程式碼並貼入專案中。如果您手邊有舊專案，也可以使用下方的「轉換工具」，將大量的 @media 語法快速替換為 @container，節省繁瑣的手動修改時間。
Container Query 相關名詞解釋
- 容器查詢 (@container)
- 一項革命性的 CSS 新功能。有別於傳統基於螢幕尺寸改變樣式，它允許元素根據其「父容器」的大小來決定自身的排版呈現。
- container-type
- 用來宣告某個元素成為「查詢容器」的屬性。設定為 inline-size 時，僅計算水平 (行內) 方向的尺寸變化；設定為 size 則會同時計算水平與垂直雙向。
- container-name
- 為容器命名。當畫面中存在多層巢狀容器時，可以透過名稱精確指定
@container 某名稱 (寬度條件)，避免判斷混淆。 - Containment (限制機制)
- 這是在底層運作的機制，為了避免瀏覽器陷入無限迴圈的重新渲染。當元素成為容器後，瀏覽器會隔離該元素內部的佈局與外部環境的互相影響。
- Inline-axis (行內軸)
- 文字流動的方向。在預設的橫向書寫模式 (如中文、英文) 下，行內軸就等同於寬度 (Width) 的方向。
- Media Query (@media)
- 大家最熟悉的響應式設計語法，它只能偵測「整個瀏覽器視窗 (Viewport)」的尺寸變化，無法得知特定區塊的可用空間。
- cqw / cqh / cqi / cqb
- 專屬於容器查詢的新單位。類似於 vw/vh，但它是相對於「容器」的百分比。例如 1cqw 代表容器寬度的 1%。
常見問題
- Q.我輸入的資料會被傳送到伺服器嗎？
- 不會。本工具的所有運算與轉換過程，完全都在您的瀏覽器 (前端) 執行，我們不會收集或傳送您的 HTML、CSS 程式碼到任何外部伺服器。
- Q.我應該使用 Media Query 還是 Container Query？
- 對於頁面的「整體巨觀佈局」(如 Header、Sidebar 等大型結構)，建議使用傳統的 Media Query。但對於可以在多種不同尺寸區塊中重複使用的「微觀組件」(Micro-layouts，如卡片、按鈕、清單等)，使用 Container Query 能讓組件根據自身可用空間進行最佳化排版，更具彈性。
- Q.目前瀏覽器的支援度如何？
- 自 2023 年起，所有現代主流瀏覽器皆已支援 Container Query。包含 Chrome 105+、Safari 16+ 以及 Firefox 110+。舊版瀏覽器並不支援，但可透過 @supports 實作平穩退化 (Graceful degradation)。
- Q.使用 container-type: size 時有什麼需要注意的嗎？
- 當設定為 size 時，不僅會在水平方向，也會在垂直方向 (block-axis) 建立容器限制。這代表如果您沒有為該容器設定明確的高度 (Height)，它的高度將會塌陷至 0。因此在多數情況下，建議使用 inline-size 即可。
- Q.自訂 HTML 預覽的樣式會和頁面互相干擾嗎？
- 不會。我們使用了 Shadow DOM 技術來隔離預覽區塊。這確保了產生器本身的 CSS 不會影響到您自訂的 HTML，同時您自訂的樣式也不會破壞工具的版面。
使用場景
可重複使用的卡片組件 (Card UI)
設計一個獨立的卡片組件，無論是被放在三欄式的網格中，還是被塞進狹窄的側邊欄，都能自動適應並完美呈現，無需依賴頁面寬度。
CMS 系統與小工具開發
為 WordPress 或其他 CMS 建立自訂區塊 (Blocks)。無論使用者將小工具放置在哪個版位 (小工具區域)，排版都能自動調整。
複雜的儀表板 (Dashboard) 介面
在可自由拖曳縮放的儀表板面板中，動態調整圖表與統計數據的佈局配置，確保資訊的可讀性。
舊專案架構現代化
透過內建的轉換工具，將過去龐大且難以維護的 Media Query 區塊，輕鬆重構為基於組件的 Container Query 寫法。
CSS Container Query 技術規格與規範
CSS Container Queries 是透過宣告 container-type 屬性建立容器，並搭配 @container 規則來達成的。這在概念上與傳統的方法有著本質上的不同。
與 Media Query 的核心差異
Media queries (@media) 是基於「視窗 (Viewport)」尺寸變化。而 Container queries (@container) 則是基於「父元素 (容器)」尺寸變化。以前，如果您將同一個卡片組件放在主要內容區和側邊欄，您需要寫兩套複雜的 media query 或增加額外的 class 來覆寫；現在，只要卡片使用 container query，它就會自動根據所在區塊的寬度，完美呈現對應的佈局。
解析 container-type 的設定值
inline-size：這是最常用、也最安全的設定。它只會針對水平 (行內) 方向的尺寸進行查詢。size：會同時針對水平與垂直雙向進行查詢，但強烈要求該元素必須擁有明確的高度，否則會發生高度塌陷。normal：預設值，代表該元素「不是」一個查詢容器。
漸進式增強與相容性 (Browser Support)
自 2023 年第一季起，Chrome 105+、Safari 16+、Firefox 110+ 與 Edge 105+ 已全面支援。對於不支援的舊版瀏覽器，它們會安全地忽略 @container 區塊內的語法，這意味著您可以透過漸進式增強 (Progressive Enhancement) 的方式，先提供基本排版，再透過容器查詢為現代瀏覽器提供最佳化體驗。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.