響應式斷點設定

ZenBlocks 將各區塊的響應式顯示基準寬度統一在 Site Settings > Responsive 中管理。這不是 WordPress 的一般設定頁面，而是位於區塊編輯器內 ZenBlocks 側邊面板中的網站共用設定。

結論

預設採用 PC / MD / TB / SP 四個層級。PC 始終啟用，MD、TB、SP 可視需要開啟或關閉，並儲存各自的上限寬度。儲存後需要重新載入頁面才會生效。

預設值

標籤預設值
PC始終啟用
MD1140px
TB840px
SP540px

開啟方式

  1. 在區塊編輯器中開啟任意文章或頁面
  2. 點擊標題列的 ZenBlocks 按鈕（共用設定按鈕）
  3. 在 Site Settings 中選擇 Responsive 面板
插入位置：點擊標題列的 ZenBlocks 按鈕
插入位置：點擊標題列的 ZenBlocks 按鈕
插入位置：可編輯斷點的 Responsive 標籤頁
插入位置：可編輯斷點的 Responsive 標籤頁

設定步驟

  1. 啟用 MD / TB / SP 中需要的斷點
  2. 在各輸入欄位中以 px 為單位輸入上限寬度
  3. 在畫面下方的 Breakpoint Ranges 中確認適用範圍
  4. 點擊 Save
  5. 儲存完成的對話框出現後，確認沒有未儲存的編輯內容，再點擊 Reload
插入位置：點擊 Save 按鈕儲存斷點變更
插入位置：點擊 Save 按鈕儲存斷點變更

確認要點

  • PC 是否始終為啟用且固定狀態
  • MD 的最小值是否大於 TB
  • TB 的最大值是否小於 MD 且大於 SP
  • 儲存後是否已完成頁面重新載入

注意事項

  • 重新載入前未儲存的編輯內容將會遺失，若正在編輯區塊，請先儲存
  • 即使輸入了不合理的寬度值，儲存時也可能會被自動修正為預設值
  • 斷點是網站共用設定，並非用來針對特定頁面進行個別調整

需要重新檢視的情境

僅在平板寬度下出現版面錯亂

  • 確認 TB 的上限值是否與實際設計對象的寬度不一致
  • 必要時可連同 MD / TB / SP 的啟用狀態一併重新調整

在編輯器中修改後卻未反映

  • 最常見的原因是執行 Save 後未進行 Reload
  • 若有其他未儲存的編輯內容，請先儲存後再重新載入頁面

相關設定