RWD 斷點是版面需要改變排列的寬度條件。設定斷點的關鍵，是找出內容何時開始擁擠，而不是先照抄某款手機的螢幕尺寸。本文用五個網頁設計檢查步驟，說明如何讓同一個網站在桌機、平板與手機上保持清楚、可操作。
RWD 斷點應該依裝置尺寸還是內容設定？
版型切換點應依內容開始失去可讀性或操作空間的位置設定。裝置寬度可用來安排測試，但不能代替對標題、導覽、卡片與表單的實際觀察；同樣是平板，瀏覽器視窗與字體設定也可能不同。
例如三張服務卡在寬螢幕並排很清楚，縮窄後若標題被擠成四行、按鈕互相推擠，就先檢查容器內距、卡片最小寬度與文字長度。只有在現有欄數無法維持清楚閱讀時，才讓三欄變兩欄或一欄。站內網頁設計服務如何安排跨裝置內容？也可以當作檢查範圍的實際例子。
| 決策方式 | 檢查依據 | 容易忽略的問題 |
|---|---|---|
| 直接套用固定裝置尺寸 | 只看常見手機與平板寬度 | 兩個預設寬度之間仍可能跑版 |
| 依內容壓縮點調整 | 觀察文字、圖片、導覽與表單何時擁擠 | 需要用真實內容逐段驗證 |
內容導向並不代表完全不用媒體查詢。媒體查詢負責切換頁面大布局；元件內部則可先靠可伸縮寬度、Grid 或 Flexbox 吸收中間尺寸。這種分工比為每一種手機型號新增一條規則更容易維護。
第一步：如何找出網頁設計最先跑版的寬度？
第一步是從寬視窗慢慢縮窄，記錄第一個出現問題的元件與當時的可用寬度。問題可能是導覽換行、標題推擠圖示，或表單標籤遮住選項；斷點應對應具體問題，而不是對應裝置名稱。
測試時要放入真正會上線的文字。隻豬人網頁設計工作室的站內版型使用約 2px 字距，較長的繁體中文標題會比預設假字更快碰到邊界。電子郵件、網址、中英文混排和三個以上的卡片標籤，也要一起檢查。
- 先在桌機寬度確認內容、圖片與按鈕完整顯示，再逐步縮小瀏覽器。
- 看到第一個擁擠點時，記下元件名稱、容器寬度與出問題的文字。
- 先調整內距、間距與最小寬度；仍無法閱讀時，再切換欄數或導覽形式。
- 在該寬度的前後都測一次，避免修好一個尺寸，旁邊的尺寸卻出現空白或溢出。
這裡記錄的是「版型開始壞掉」的條件，不是每個專案都通用的神奇數字。若不同元件在不同寬度遇到問題，各元件可以有不同切換點；不必強迫整頁只用同一組斷點。
第二步：Grid 與 Flexbox 怎樣減少斷點數量？
可伸縮的 Grid 與 Flexbox 能讓內容先自行分配空間，必要時才切換版型。卡片區可設定合理的最小寬度與自動換欄；圖文區則讓文字欄能縮小，避免內部長字串把整頁撐寬。
以下是卡片網格的示意寫法：每張卡片保留足夠的閱讀寬度，容器放不下時自然換行。數值只是示範，實際最小寬度仍應依本站的字距、標題與按鈕內容決定。
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.25rem;
}
.service-grid > * { min-width: 0; }若使用 Elementor Flexbox 容器，還要檢查子容器的寬度、最小寬度、換行與平板設定。本站服務卡曾在平板預覽出現文字欄過窄的情況，最後改成上下排列，才讓說明文字和示意圖都有足夠空間。先檢查容器設定，再補必要的 CSS，比不斷疊加覆蓋規則更穩定。
第三步：桌機、平板與手機的資訊順序怎麼安排？
跨裝置資訊順序應以使用者閱讀任務為主：先看到標題、關鍵說明與主要行動，再看到輔助圖像和次要細節。桌機可以左右並排，手機可以上下堆疊，但重要文字、連結與表單功能應維持可取得。
桌機版的三欄卡片可在平板改為兩欄、手機改為單欄。圖文區在手機若只是用 CSS order 反轉視覺位置，鍵盤焦點和輔助工具的閱讀順序可能仍依原始 HTML 前進；先排好合理的文件順序，再處理視覺布局會更清楚。
Google 的行動版索引建議指出，行動版與桌機版應提供相當的主要內容與有意義的標題。因此，響應式網頁設計不只是把元素縮小；手機版如果直接刪掉服務資訊，也會讓訪客與搜尋系統少看到重要內容。
第四步：圖片、表格與長字串為什麼仍會跑版？
圖片、表格與長字串會跑版，通常是因為元件保留了超過容器的固有寬度。圖片要能縮放並保留比例，表格在窄螢幕需要可讀的橫向捲動，網址與電子郵件則要避免把卡片撐出畫面。
圖片上傳時先設定正確的 width 與 height，再由共用樣式控制 max-width: 100%。瀏覽器可以根據尺寸預留位置，降低圖片載入後的版面移動；web.dev 的 CLS 指南也建議為圖片保留空間。裁切封面時要再檢查人物、裝置與重點是否仍在畫面內。
網站常見的長字串包括英文產品名、電子郵件、優惠代碼與網址。處理方式是讓文字欄可以縮小，並在必要位置允許換行；不要用全站 overflow-x: hidden 把問題藏起來。表格若有多欄資料，讓表格容器自行橫向捲動，比把每個字壓到無法閱讀更好。
第五步：上線前如何檢查 RWD 與搜尋體驗？
上線前應在多個實際寬度檢查畫面、操作與搜尋可讀性。常用測試寬度可以包含 320、375、768、1024 與 1440 CSS 像素，但這些是檢查樣本，不代表網站一定要在相同數字建立斷點。
- 檢查是否出現整頁水平捲動，以及導覽、按鈕與表單能否用滑鼠、觸控和鍵盤操作。
- 確認桌機、平板與手機都能看到主要服務內容、標題、圖片替代文字與聯絡入口。
- 測試長標題、中英文混排、表單錯誤訊息與展開式選單，尤其是介於兩個預設視窗之間的寬度。
- 使用實際裝置與瀏覽器開啟頁面，並以 Search Console、PageSpeed Insights 檢查索引與 Core Web Vitals 線索。
若手機版只在截圖中正常、實際點開選單卻遮住內容，跨裝置版型仍未完成。隻豬人會在交付前逐一核對關鍵頁面與互動；上線後新增服務或圖片，也需要再看版面是否受到新內容影響。想了解從規劃到檢查的順序，可參考網站建置流程會在哪些階段檢查跨裝置體驗？。
常見問題：斷點與後續維護怎麼判斷？
響應式斷點沒有適用所有網站的固定數字。判斷重點是內容是否清楚、互動是否可用，以及新增資料後版型能否持續運作。以下四題整理網站規劃與維護時常見的疑問。
版型切換點一定要設在 768px 或 1024px 嗎？
不一定。768px 與 1024px 可以當作測試寬度，實際切換點應依導覽、卡片、圖片與表單何時開始擁擠決定。若某個元件在 900px 已經難讀，就應在問題出現的位置附近調整，而非等待預設斷點。
手機版可以把桌機版的文字全部隱藏嗎？
不建議隱藏主要服務資訊。手機版可以改用折疊區或重新排序節省空間，但訪客仍應能取得與桌機相當的核心內容、連結與聯絡方式。需要精簡時，優先刪除重複句子，保留實際回答。
網站新增卡片後，版型還會再跑掉嗎？
仍有可能。新增卡片可能帶來更長的標題、不同尺寸的圖片或新的按鈕。採用可伸縮容器能減少問題，但每次新增內容仍應在桌機、平板與手機確認文字、圖片和互動狀態。
調整網站斷點需要重新製作整個網站嗎？
不一定。若問題集中在少數容器，可先檢查元件寬度、間距、圖片尺寸與現有媒體查詢；若整站的資訊順序和元件結構都不適合手機，才需要較大範圍的重整。想核對相關做法，也可閱讀網頁設計內容如何兼顧 AI 搜尋的可讀性？與網站摘要如何寫得讓搜尋者看懂？。
