同一個版面，在桌機上排得漂漂亮亮，換到手機卻擠成一團，或是某個橫幅在電腦上很大器、在手機上卻只是擋路。這就是響應式斷點客製要解決的問題。WordPress 的區塊編輯器看似把響應式都包好了，但真正想控制「哪個裝置看到什麼、在哪個寬度換版」時，多數人才發現內建選項其實有限，網路上的教學又大多停在「裝個外掛、勾選隱藏」就結束。

這篇會把整套思路講清楚：WordPress 實際上用了哪些斷點數字、區塊編輯器為什麼刻意不走傳統媒體查詢、WordPress 7.0 之後原生就能依裝置隱藏區塊、以及什麼時候該用 CSS 自己寫斷點。看完你會知道每個情境該選哪條路，而不是遇到問題只會裝外掛。

WordPress 響應式斷點客製到底在客製什麼

響應式斷點客製，指的是「決定版面在哪個螢幕寬度切換呈現方式，以及切換後長什麼樣」。斷點（breakpoint）就是一個螢幕寬度的門檻值，跨過這個值，CSS 就套用另一組樣式，讓網站從桌機版變成平板版、再變成手機版。

很多人以為 WordPress 把響應式全自動處理好了，事實是只處理了一半。區塊編輯器的多數區塊確實會在窄畫面自動重新堆疊，例如「欄」（Columns）區塊在手機上會把並排的欄改成上下排列。但「要不要在手機上隱藏這張圖」「斷點要設在 768 還是 600」「字級要不要隨螢幕平滑縮放」這些，預設都管不到，需要自己客製。

客製的對象通常落在三類：

• 裝置可見性：某個區塊只在桌機顯示、手機隱藏，反之亦然
• 斷點數值：版面在哪個像素寬度換版，例如選擇 768px 還是 782px 當作手機與平板的分界
• 跨斷點的樣式變化：同一個元素在不同寬度的字級、間距、欄數要怎麼變

搞清楚自己要客製的是哪一類，後面選工具就不會走錯路。

WordPress 內建用了哪些斷點數字

WordPress 沒有單一一套「官方斷點」，而是不同元件各自硬寫了不同的數值，這也是客製時最容易踩雷的地方。先把現行的幾組數字攤開來看。

業界另有一組更通用的習慣值：768px 當手機與平板分界、1024px 當平板與桌機分界，很多佈景主題沿用這組。要注意的是，主題用的斷點和 WordPress 核心元件用的斷點不一定一致，這正是某些區塊在特定寬度「看起來怪怪的」根本原因。

導覽區塊的漢堡選單斷點是個典型痛點。它的切換點寫死在區塊的 JavaScript 內，目前沒辦法從編輯器介面直接改，想調整就得靠額外的 CSS 覆寫。知道這個數字（約 782px）藏在哪，你才有辦法對症下藥。

為什麼區塊編輯器刻意不用傳統媒體查詢

這是多數教學跳過、卻最關鍵的一點：WordPress 區塊編輯器在架構上刻意避開傳統的 CSS 媒體查詢，改走「內在式設計」（intrinsic design）這條路。理解這個設計選擇，你才會明白為什麼編輯器裡找不到「設定斷點」的欄位。

內在式設計這個詞由設計師 Jen Simmons 在 2018 年提出。它的核心主張是：與其預先設定幾個固定的螢幕寬度區間（媒體查詢的做法），不如讓元件用流動的尺寸邏輯，依照可用空間自然伸縮。背後的現實是，市面上的裝置解析度多到爆量，預設幾個斷點永遠涵蓋不完，乾脆讓版面自己「長」到剛好。

具體實現靠的是 CSS 的彈性技術，例如 clamp()、flex、grid 的自動換行。舉例來說，流動字級（fluid typography）不是在某個寬度從 16px 跳到 20px，而是在整段視窗寬度範圍內平滑地放大縮小。WordPress 會幫你算出對應的 clamp() 數值，預設的縮放區間大約落在視窗寬度 320px 到 1600px 之間。

這套哲學的好處是少寫媒體查詢、版面在任何寬度都不會「卡」在某個尷尬尺寸；代價是它沒辦法精準控制「就是要在 768px 這個點換版」。所以核心團隊把責任切開了：流動、自適應的部分交給內在式設計處理，需要精準斷點切換的部分，再透過區塊可見性或自訂 CSS 補上。

用 theme.json 做不靠斷點的流動式響應

如果你在開發或客製區塊主題，theme.json 是實現內在式響應最乾淨的入口，完全不需要寫媒體查詢。它讓字級和間距隨視窗平滑縮放，這是內在式設計在 WordPress 裡最實際的落地方式。

開啟流動字級的最小設定，是在 theme.json 的 typography 設定裡把 fluid 打開：

{
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        {
          "slug": "large",
          "name": "Large",
          "size": "1.75rem",
          "fluid": {
            "min": "1.25rem",
            "max": "1.75rem"
          }
        }
      ]
    }
  }
}

fluid 可以是布林值，對整組字級統一開關；也可以是物件，用 min 與 max 指定單一字級的縮放下限與上限。設定後 WordPress 會自動產生 clamp()，讓字在小螢幕收到 min、大螢幕放到 max，中間平滑過渡，省去你手刻多組媒體查詢。間距（spacing）也能用同樣的流動邏輯處理。

有一個體驗上的底線要守：內文字級的最小值不要低於 0.875rem（約 14px），再小手機讀者會吃力。流動字級適合處理「字與間距隨螢幕大小變化」這種連續性需求，但它仍然不負責「在某裝置整塊隱藏」，那是下一節的工作。

依裝置隱藏區塊，WordPress 7.0 起原生就能做

需要「這張圖只在桌機顯示、手機藏起來」這種精準的裝置切換時，WordPress 7.0 帶來了關鍵改變：依裝置隱藏區塊的功能已經內建進核心，不再非裝外掛不可。這點很多現有教學還沒更新，仍停在「要裝外掛」的舊資訊。

WordPress 7.0 是 2026 年的第一個大版本，於 2026 年 5 月 20 日釋出。它把過去要靠頁面建構器或外掛才有的「區塊可見性」（Block Visibility）做進了核心。操作上，選取任一區塊後，可以從區塊工具列、列表檢視（List View）或命令面板（command palette）叫出可見性設定，勾選要在桌機、平板或手機哪幾種裝置隱藏這個區塊，不用碰任何一行 CSS。

目前核心版本的裝置可見性用的是固定的三段視口：手機（≤480px）、平板（480px–782px）、桌機（>782px）。這三段斷點現階段不能自訂。依照官方的規劃，可設定的斷點與 theme.json 整合預計在 WordPress 7.1 才會落地，屆時主題就能自行定義視口標籤與斷點，跳脫固定的手機／平板／桌機三段。

如果你的 WordPress 還沒到 7.0，或需要更細的條件（例如依登入狀態切換），市面上仍有成熟的外掛可選，例如 Block Visibility、Responsive Blocks、Superb Addons 這類。它們的共同做法都是在區塊側邊欄加上裝置切換開關，部分還能自訂斷點數值來對齊你的主題。能用核心就用核心，少裝一個外掛就少一份維護與相容性負擔。

想精準控制斷點時，用 CSS 自訂類別搭媒體查詢

當內建的三段固定斷點不夠用，或你需要的不只是「隱藏」而是「換一組樣式」時，自己寫 CSS 媒體查詢仍然是最精準、最不受外掛綁架的做法。流程是「給區塊掛一個類別，再針對這個類別寫媒體查詢」。

每個區塊在側邊欄的「進階」（Advanced）區段都有一個「額外的 CSS 類別」（Additional CSS class（es））欄位。先在這裡填一個自訂類別名稱，例如 hide-mobile，接著到「外觀」的自訂 CSS（或主題的樣式檔）寫對應規則：

/* 螢幕寬度 768px 以下隱藏掛了 hide-mobile 的區塊 */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* 769px 以上隱藏掛了 hide-desktop 的區塊 */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

這個做法的彈性遠超過勾選式工具：斷點數字你說了算，想設 768、800 還是 1024 都行；而且不只能隱藏，還能改字級、改間距、改欄數，任何 CSS 屬性都能依斷點切換。導覽區塊那個藏在 JavaScript 裡、改不動的漢堡選單斷點，最終也是靠這種媒體查詢覆寫來解決。

代價是它需要一點 CSS 基礎，且類別名稱要自己管好，掛錯類別或拼錯字就不會生效。建議把自訂 CSS 集中放在子主題或主題的自訂 CSS 區，不要散落在各個區塊，日後維護才找得到。

隱藏區塊不等於變快，這個誤會要先講清楚

關於「依裝置隱藏區塊能加快手機載入速度」，有個普遍但錯誤的說法要修正：用 display: none 隱藏的區塊，內容其實照樣下載、照樣進到頁面裡，瀏覽器只是不把它畫出來。所以隱藏一張大圖，並不會省下那張圖的傳輸量。

這牽涉到「隱藏」與「不載入」的差別。無論是核心的裝置可見性、外掛的開關，還是 CSS 的 display: none，多數都是前端視覺隱藏，HTML 與多數資源仍會送到瀏覽器。想真正省流量、加快手機速度，該做的是處理資源本身，例如用響應式圖片讓手機只抓較小的版本，而不是把大圖載下來再藏起來。

那隱藏區塊到底有沒有意義？有，但價值在「版面與體驗」，不在「速度」：

• 減少視覺雜亂：把桌機才合理的複雜區塊在手機上收掉，畫面更乾淨
• 切換行動呼籲：桌機放完整聯絡表單，手機改放「點擊撥號」按鈕，各取所需
• 凸顯重點內容：小螢幕只留最重要的資訊與行動按鈕

還有一個 SEO 上的提醒：合理地隱藏裝飾性或重複的區塊，一般不會傷害排名；但別把重要內容只在某些裝置藏起來、或對搜尋引擎與使用者顯示不一致的內容，那才會出問題。把「隱藏」用在優化體驗、而非掩蓋內容，方向就對了。

四種做法怎麼選，一張對照表收斂

工具講完了，真正的功力在「遇到需求知道走哪條路」。把前面四種做法依適用情境收斂成一張對照表，照著對需求挑即可。

挑選的順序可以這樣想：先問「我要的是連續縮放還是某裝置整塊切換」。要連續縮放就走 theme.json 流動設定；要整塊切換，再問「固定三段夠不夠、要不要自訂斷點」。固定三段夠用且版本到 7.0，直接用核心可見性最省事；需要自訂斷點或換樣式，就回到 CSS 媒體查詢。外掛則是當核心還不支援你的情境（舊版本、特殊條件）時的補位選項。

要客製 WordPress 的響應式斷點，從來不是「裝個外掛勾一勾」這麼單一。先認清 WordPress 把責任拆成了內在式流動與精準斷點兩塊，再依需求在 theme.json、核心可見性、外掛與自訂 CSS 之間選對工具，版面才會在每個裝置上都站得住。下次再遇到「桌機正常、手機跑版」，先判斷它屬於哪一類問題，你就知道該動哪裡。