先判斷「亂」出在哪一層
調整模板時覺得響應式頁面亂，通常不是程式碼問題，而是頁面結構在動手前沒有先理清。先分清是以下三種情況中的哪一種：
- 內容層級亂：同一屏裡標題、正文、按鈕、圖片混在一起，不知道誰先誰後。
- 模組順序亂：桌面端按 A-B-C 排，手機端被折成 C-A-B，閱讀順序斷了。
- 斷點表現亂：同一模組在寬螢幕正常，到窄螢幕就擠壓、換行、留白不均。
三種問題的整理方法不同。先打開模板的預覽模式，把瀏覽器視窗從寬到窄慢慢拖動，記錄每個模組在哪個寬度開始出問題，再決定先改哪一層。
把斷點整理成一張可核對的表
響應式頁面靠斷點（頁面寬度變化到某個值時切換佈局）來控制顯示。模板自帶斷點時，不要急著新增，先把現有斷點列出來核對。
整理時建議按這個順序：
- 列出模板目前使用的斷點寬度，寫成一行，例如 1200、992、768、480。
- 在每個斷點下截圖或記錄：導航、主圖、正文、按鈕、表格、頁尾分別是什麼狀態。
- 標出「內容被截斷」「按鈕換行」「圖片拉伸」「文字壓邊」的位置。
- 只對確實出問題的斷點做調整，不要為每個模組單獨加一套斷點。
判斷標準很簡單：同一類模組（例如所有卡片、所有按鈕）在同一斷點下應保持一致的对齊和間距。如果只有某一個卡片特殊，優先檢查它的內容長度，而不是改斷點。
先整理內容層級，再調樣式
很多響應式混亂，本質是內容沒有主次。整理時按「讀者先看什麼」排一遍：
- 每個模組只保留一個主標題，副標題和說明文字歸到同一組。
- 按鈕和連結不要和正文混排，單獨成組，方便窄螢幕時整組換行。
- 圖片和說明文字成對出現，避免圖片在一屏、說明在下一屏。
- 長表格、寬圖、程式碼區塊這類內容，提前決定是橫向滾動還是簡化展示。
整理完層級後，再回到模板裡調整模組順序。桌面端從左到右、從上到下的閱讀順序，在窄螢幕應盡量保持為從上到下，不要出現視覺順序和內容順序相反的情況。
模組順序和命名一起整理
模板調整最容易失控的地方，是模組被反覆拖動、複製、隱藏，最後沒人記得哪個在用。建議在調整前先做兩件事：
- 給模組起可檢索的名字：例如「首頁-主圖-品牌介紹」「產品頁-參數表-行動版」，不要用「模組1」「副本2」。
- 記錄模組的去留：保留、合併、隱藏、刪除，各自寫清楚，避免改到一半又恢復。
如果模板支援隱藏模組，優先使用隱藏而不是刪除，便於對比調整前後的效果。調整完成後，再統一清理不再使用的模組，減少後台列表的干擾。
調整後按順序複核
改完不要只看一個頁面。按下面順序複核，能發現大部分響應式問題：
- 從首頁開始，依次打開欄目頁、內容頁、表單頁。
- 每個頁面分別在寬螢幕、平板、手機三種寬度下查看。
- 重點檢查：導航能否展開、按鈕是否可點、圖片是否變形、文字是否溢出、表格是否可讀。
- 把發現的問題按「斷點問題」和「內容問題」分開記錄，再分別處理。
複核時不必追求每個寬度都完美，先保證主要閱讀路徑不斷、主要操作入口可見。其餘細節可以按優先級分批調整。
日常維護時保持整理習慣
響應式頁面整理不是一次性的。後續更新內容時，繼續保持幾個習慣：新增模組先按現有命名規則取名；替換圖片時確認在窄螢幕下的顯示效果；發佈前用手機實際打開一次頁面。這樣模板再調整時，頁面結構仍然清楚，不需要每次從頭梳理。
