首頁 › 名詞百科 › 響應式網頁設計（RWD）

數位與系統・Knowledge

響應式網頁設計（RWD）

同一個網頁依螢幕寬度自動調整版面，手機、平板、電腦都好讀，不必做兩個網站。

關鍵事實

核心做法：用彈性版面與斷點，依螢幕寬度切換欄數、字級、圖片與導覽
一份內容：同一網址、同一份程式服務所有裝置，不必維護電腦版與手機版兩套
搜尋影響：Google 以行動版內容為索引與排名依據，手機上的呈現就是正式版
驗收方法：用手機實機與縮放瀏覽器視窗檢查表格、圖片、按鈕與導覽
常見盲點：表格、長圖、嵌入影片與彈出視窗最容易在窄螢幕跑版

白話解釋

響應式網頁設計（RWD）是一種做網站的方式：同一份網頁程式會偵測裝置的螢幕寬度，自動改變欄位數、字級、圖片大小與導覽方式，讓內容在手機上直排、在電腦上多欄並列。

它取代了過去「電腦版加手機版」兩套網站的做法，一個網址、一份內容、一次維護。對業主的意義是：顧客不論用什麼裝置打開，都不用放大縮小、不會按不到按鈕；對搜尋引擎的意義是：行動版就是正式版，索引與排名以手機上的呈現為準。

你什麼時候會遇到它

開發公司報價單上寫「RWD 響應式設計」，你想知道這是加值還是標配；用手機打開公司官網，發現文字要放大才看得到、表格超出螢幕；或是在搜尋主控台看到「行動裝置可用性」的警告。這三種時刻，你碰到的都是同一件事：網站有沒有為手機設計。

常見情境與對策

舊官網是十年前做的，手機打開要左右滑動才能看完一行——這是沒有 RWD 的典型症狀。改版時把 RWD 列為基本要求，並在驗收時用常見的手機尺寸逐頁檢查，特別是表格與聯絡資訊區塊。
開發公司說有做 RWD，但手機上的服務比較表格擠成一團——RWD 做了但沒處理複雜元件。要求表格在窄螢幕改為卡片式或可橫向捲動並保留表頭，圖片與影片設定最大寬度，驗收時逐一確認。
搜尋主控台出現「可點選元素過於接近」的警告——按鈕與連結在手機上的間距不足，屬於 RWD 細節問題。請開發方加大可點選區域與間距，修正後在搜尋主控台重新驗證。

LINE 諮詢

把官網設計的現況與需求傳過來，先免費書面初判。

傳什麼: 現有網站網址與後台權限還沒有網站也能先談
商品或服務清單、作業流程說明表單樣張或試算表皆可
需求清單一句話也行
多久回: 週一至週五 09:00–18:00 依序回覆；LINE 全天可傳資料
下一步: 免費書面初判
約時間細談
委任開發

先傳資料做初判，需要時再約時間細談

加 LINE 諮詢官網設計，偉騰統包開發

程序怎麼走

列出目標裝置：從分析工具看訪客的裝置與螢幕尺寸分布，決定要重點驗收的幾種寬度。
設計行動優先：先設計手機版面再擴展到電腦，確保核心內容與行動呼籲在窄螢幕就完整呈現。
處理複雜元件：表格、圖表、影片、地圖、彈窗等逐一設計窄螢幕的呈現方式，不要靠縮放。
實機驗收：用常見手機尺寸實際操作每個頁型，檢查可讀性、按鈕間距、導覽與載入速度。
持續監控：上線後定期看搜尋主控台的行動裝置可用性報表與速度指標，新增頁型時重跑驗收。

先看清楚

RWD 已是基本要求而不是加值服務，報價單把它列為額外項目要問清楚。真正要檢查的是「做得好不好」：表格與圖片在窄螢幕是否可讀、按鈕間距是否夠大、導覽是否收合得當、以及手機上的載入速度。縮小瀏覽器視窗看版面變化，是最快的初步檢查方法。

常見錯誤

把 RWD 當成額外加購項目——它是現代網站的基本要求，額外計價代表對方的基礎做法過時。
只在電腦上縮小視窗測試就驗收——真實手機的觸控、鍵盤與瀏覽器列會蓋住按鈕，實機才看得到問題。
手機版把內容砍掉一半以求簡潔——搜尋引擎以行動版內容為準，被砍掉的內容等於不存在。

行動前自查清單

開發契約已將 RWD 列為基本要求而非加購項目
表格、長圖、影片、地圖在窄螢幕的呈現方式已設計並驗收
常見手機尺寸的實機驗收已完成，按鈕間距與導覽收合正常
手機版內容與電腦版一致，沒有為了版面刪除資訊
搜尋主控台的行動裝置可用性報表沒有未解決的警告

常見問題