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) 的方式，先提供基本排版，再透過容器查詢為現代瀏覽器提供最佳化體驗。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.