響應式與自適應網站：從手機閱讀安排版面

社區課程頁在電腦上有海報、場次與報名表，看起來都很完整。換到手機後，海報文字縮得太小，費用要左右拖動才看得完，鍵盤一出現又遮住送出按鈕。這些問題不會因為網站用了手機版主題就自動消失。

響應式設計的重點是讓內容與操作配合可用空間，而非只交出幾張不同尺寸的截圖。以下課程頁、斷點示例與驗收清單均為原創，依 2026 年 9 月 14 日查閱的 MDN、web.dev、W3C 與 Chrome 官方文件整理，沒有實際量測特定網站或裝置效能。

響應式與自適應，差別在版面如何改變

響應式版面通常結合彈性網格、可縮放媒體與條件式樣式，使內容在可用寬度改變時跟著調整。例如課程卡片在窄畫面排成單欄，空間足夠後改成多欄，而卡片寬度與間距仍有彈性，不是只有三種固定成品。

自適應常指預先準備幾組版面，再依條件切換到適合的一組；web.dev 的設計入門以媒體查詢搭配固定寬度版面說明這種做法。實際專案用語可能不同，也可能混合使用兩種策略，所以委託時應問清楚版面在尺寸之間怎麼表現，不能只看報價單上的縮寫。

RWD 並不表示永遠沒有斷點，自適應也不必然等於另一個手機網址。真正需要比較的是內容是否一致、各種寬度能否使用，以及維護多套呈現方式的成本。對一般內容頁，可先評估彈性版面；若有特殊操作環境，再討論需要明確切換的設計。

先用窄畫面排內容，再找真正需要的斷點

先列出讀者報名前一定要看到的資訊：課程內容、日期、地點、費用、資格與取消方式。把它們放成可順序閱讀的單欄，主要行動放在能理解內容後找到的位置。窄畫面優先是迫使團隊想清楚資訊順序，不是把手機讀者當成只需要少量資訊的人。

逐步拉寬頁面，觀察何時出現過長的文字行、太散的資訊或可合理增加欄位的空間，再定義斷點。也要反向縮窄，檢查標題換行、按鈕擠壓與表單欄位。web.dev 建議依內容選擇斷點，避免把某支手機或某個品牌尺寸當成長期固定規則。

原創練習可以暫以 720 CSS 像素作為課程摘要與報名區改成雙欄的候選點，但應測試 719、720 與 721，以及更窄和更寬的範圍。若真實標題、字型或欄位不適合，就調整數值；720 是設計假設，不是官方推薦、手機與平板的通用分界。

彈性容器、圖片與文字要一起配合

實作上可以使用 CSS Grid、Flexbox 或其他適合的版面方式，讓欄位利用可用空間，並在需要時改變排列。MDN 強調彈性網格不必針對每一款裝置逐一畫死尺寸；但用了這些技術也還是要檢查內容，固定寬度子元素照樣可能把整頁撐出去。

圖片應能在容器內縮放並保留適當比例，另提供符合版面需求的檔案尺寸。若海報包含必要文字，還要把課程資訊以可閱讀的正文提供，不依賴放大圖片找日期。裁切照片時也要確認主體沒有消失；顯示尺寸變小不代表下載的檔案一定變小。

網頁需要合適的 viewport 設定，避免行動瀏覽器先以較寬桌面版面排好再縮小。不要為了維持畫面整齊就禁止使用者縮放；長網址、地址及錯誤訊息也應納入測試，不能只用短標題及理想內容通過一次預覽。

手機上的導覽、表格與表單需要重新安排

導覽可收合成選單，但展開入口要清楚、內容仍能操作，名稱與目的地也應維持一致。不要把電腦滑鼠移上去才出現的關鍵功能原封不動搬到觸控情境。螢幕較大也不代表一定用滑鼠，觸控筆電和平板外接鍵盤都可能改變互動方式。

課程表若包含多個場次，可以評估按場次改成卡片，讓日期、地點和費用在同一組內閱讀。資料必須保留二維關係時，可安排適當的表格區域及捲動提示，而不是直接切掉右半邊。變成卡片後仍要保留欄位名稱，避免數字失去意義。

表單在窄畫面通常適合清楚的縱向順序，標籤、輸入欄與錯誤提示要能一起找到。實際輸入時檢查軟體鍵盤、頁面捲動及固定在底部的按鈕是否互相遮擋；也要能修正前一欄。手機畫面較小，不是省略費用、取消條件或重要提醒的理由。

驗收包含放大與中間尺寸，不只幾張裝置圖

W3C WCAG 的 Reflow 準則對一般垂直捲動內容，要求在相當於 320 CSS 像素寬的條件下，不失去資訊或功能，也不需雙向捲動；需要二維布局才有意義的內容另有例外。這是檢查條件，不是宣稱世界上最小手機就等於 320，也不是只改一個寬度就符合全部無障礙要求。

可從 1280 CSS 像素寬的可用視窗，以 400% 縮放檢查相當於 320 的內容空間，並注意實際瀏覽器工具列和捲軸影響。一般正文應能重新排列；地圖或特定表格的例外要依用途判讀，不能為了通過表面檢查把重要欄位藏起來。

除候選斷點前後，也要測試橫向、直向、較長文字與錯誤狀態。用鍵盤走完選單及報名流程，確認焦點可見且不被固定內容遮住，再用手機實際點選。每個問題記下畫面尺寸、步驟與預期結果，修正後只重測受影響的情境及相關流程。

1. 以真實課程內容建立窄畫面的閱讀順序，保留完整重要資訊。
2. 連續調整寬度，依內容擠壓或過度分散的位置提出斷點。
3. 處理圖片、表格、導覽、表單及固定元素的各種狀態。
4. 檢查中間尺寸、縮放及鍵盤，再以真機完成報名等主要任務。

模擬工具先找問題，真機確認實際操作

Chrome DevTools 的 Device mode 可調整模擬視窗大小，也能模擬部分網路與運算條件。開啟開發者工具後切換裝置工具列，使用 Responsive 尺寸模式拖曳或輸入寬高，就能快速找出某個區塊開始溢出的範圍，不必只切換預設裝置名稱。

Chrome 官方也明確說明，裝置模式是近似模擬，並非程式真的在那台手機執行。觸控感受、軟體鍵盤、行動瀏覽器行為與硬體效能，仍需真機確認。模擬頁面截圖、真機流程成功和效能量測，應分別留下紀錄，不把一張預覽圖說成全部裝置都測過。

交付時保留版面規則、斷點原因、例外元件及測試範圍。之後新增課程、翻譯或更換字型，也要用較長內容再檢查。響應式設計的維護目標，是內容變動後仍能閱讀與操作，而不是永遠維持某張設計稿的精確外觀。

從需求安排完整網頁設計流程

先整理網站內容與導覽

規劃實際頁面的技術檢查

• 教學
• 軟體與 App
• 架站與電商
• 網域、主機與前端