RWD 網頁怎麼做？CSS Media Query 與斷點設定實作

RWD 網頁實作的核心：不是縮小畫面，而是重新安排版面

RWD 網頁的重點，是讓同一份網頁內容在不同螢幕寬度下重新排列，而不是把桌機版硬縮到手機上。實作時通常會用 viewport、彈性版面與 CSS Media Query，讓導覽、欄位、表格、表單都能在手機、平板與桌機上正常使用。

實務上，RWD 可以先抓三個方向：第一，HTML 內容盡量維持同一份，避免手機版和桌機版內容不一致；第二，CSS 要能讓區塊寬度、欄數、間距跟著螢幕調整；第三，斷點要依照版面何時開始不好用來設定。

我比較不建議一開始就背一堆裝置尺寸。iPhone、Android、平板型號一直變，但內容會在哪裡擠壓、按鈕會在哪裡難點，這些才是 RWD 實作真正要處理的問題。

RWD 和手機版網站是一樣的嗎？

RWD 和獨立手機版網站不完全一樣。RWD 通常是同一個網址、同一份內容，透過 CSS 依螢幕寬度調整版面；獨立手機版網站則可能是另一套網址或模板。

項目	RWD 網頁	獨立手機版網站
網址	通常同一個 URL	可能有 m. 或不同路徑
內容	同一份內容依寬度調整	可能另做手機內容
維護	集中維護 HTML 與 CSS	可能要維護兩套模板
常見用途	一般企業網站、部落格、產品頁	大型舊站或特殊功能站

這篇實作指南的範圍

這裡聚焦在 CSS Media Query、viewport、斷點設定與驗收流程，不處理報價、案例賞析、圖片風格規劃或完整改版專案管理。

• 會處理：RWD 網頁基礎觀念、viewport 設定、mobile-first CSS、Media Query 寫法。
• 會處理：手機、平板、桌機斷點怎麼抓，導覽、卡片、雙欄、表格與表單怎麼調整。
• 會處理：如何用 Chrome DevTools、PageSpeed Insights、Google Search Console 檢查。
• 不展開：AWD 長篇比較、網站改版報價、品牌案例賞析、圖片規劃、服務銷售文案。

開始前先設定 viewport 與 mobile-first 基準

RWD 網頁開始實作前，要先設定 viewport，讓瀏覽器用裝置實際寬度來計算版面。接著用 mobile-first 的方式先寫手機版 CSS，再透過 CSS Media Query 逐步擴充到平板與桌機，通常比較好維護。

RWD 必備設定：viewport 是什麼？

viewport 是瀏覽器用來判斷頁面寬度的基準。沒有正確設定時，手機可能會用接近桌機的寬度去渲染頁面，結果看起來像整個網站被縮小，文字很小，按鈕也很難點。

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width 代表版面寬度跟著裝置寬度走，initial-scale=1 代表初始縮放比例為 1。這段通常放在 HTML 的 <head> 裡，是 RWD 實作的基本前置設定。

為什麼建議從手機版 CSS 開始寫？

從手機版 CSS 開始寫，會逼你先處理最小螢幕上的內容優先順序。手機空間有限，導覽、標題、CTA、表單欄位要先能用，再放大到平板與桌機。

.content {
  padding: 16px;
}
.hero-title {
font-size: 28px;
}
.form-row {
display: block;
}

我通常會先確認手機上能不能讀、能不能點、能不能填，再去想桌機版要不要做雙欄或三欄。這樣比較不會做出桌機很漂亮，手機卻卡住的頁面。

CSS Media Query 基本寫法：min-width、max-width 與常見語法

CSS Media Query 是 RWD 網頁用來判斷螢幕條件並套用樣式的工具。最常見的條件是寬度，例如到 768px 以上改成平板版，到 1024px 以上改成桌機版。

min-width 寫法：手機優先逐步放大

min-width 適合 mobile-first。先寫手機版基礎樣式，再用 Media Query 在較寬螢幕上增加欄數、放大字級或調整間距。

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 2fr 1fr;
gap: 24px;
}
}

這種寫法的好處是預設就照顧小螢幕。只要斷點沒有命中，手機仍然吃得到最基本、最穩定的版面。

max-width 寫法：從桌機版往下修

max-width 常見於舊站維護，因為很多舊 CSS 一開始就是桌機版。這時可以先用 max-width 在較小寬度下修正欄位、間距與字級。

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 767px) {
.layout {
grid-template-columns: 1fr;
}
}

如果是新專案，我會優先選 min-width。如果是舊網站，先用 max-width 補救爆版區塊也合理，不需要一開始就把整份 CSS 推倒重寫。

常見 Media Query 寫法範例

Media Query 不只可以判斷寬度，也可以判斷方向、滑鼠 hover 能力與指標類型。不過一般 RWD 網頁，先把寬度斷點寫清楚就夠用了。

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (orientation: landscape) {
.hero {
min-height: 70vh;
}
}
@media (hover: none) and (pointer: coarse) {
.nav-link {
padding: 12px 16px;
}
}

不要為了看起來完整而塞太多條件。RWD 的 CSS 越容易讀，後續修改版面時越不容易互相覆蓋。

RWD 斷點怎麼設定？用內容斷點優先，不要只背裝置尺寸

RWD 斷點應該先看內容和版面何時開始不好用，再用常見裝置寬度當參考。當卡片太擠、導覽放不下、表格爆版、表單難填時，就是該考慮設定 breakpoint 的位置。

斷點不是裝置型號，而是版面需要改變的位置

breakpoint 的本質，是版面需要切換的條件值。它不應該只是某支手機或某台平板的寬度，而是內容在某個寬度下開始失去可讀性或可操作性。

例如卡片標題在 700px 左右開始換行太碎，就可以考慮在接近的位置調整欄數。導覽列在 900px 以下塞不下主要項目，就可以改成收合選單。這比硬套裝置清單更貼近真實使用情境。

常用 RWD 斷點建議表

常用斷點可以當作起點，但不該當作唯一標準。實作時仍要用內容檢查一次，看版面是否真的需要在那些寬度切換。

參考寬度	常見範圍	適合調整的內容
480px 以上	大手機	微調字級、按鈕寬度、卡片間距
768px 以上	平板	單欄改雙欄、表單欄位並排
1024px 以上	小桌機或橫向平板	導覽展開、主內容加側欄
1280px 以上	桌機	限制最大寬度、增加欄數或留白

手機、小平板、大平板、桌機各自要檢查什麼

裝置情境	主要檢查項目	合格標準
手機	導覽、CTA、表單、文字大小	不用放大也能讀，按鈕容易點，表單可順利填寫
小平板	卡片欄數、內文寬度、圖片比例	內容不過度拉長，卡片不擠壓
大平板	雙欄版面、側欄、導覽狀態	主要內容和次要內容有清楚層級
桌機	最大寬度、留白、表格、導覽展開	版面不會被拉到過寬，資訊掃讀順暢

如何用 Chrome DevTools 找出真正需要的斷點

Chrome DevTools 找斷點的重點，是拖曳 viewport 寬度，看版面在哪裡開始壞掉，而不是只點幾個預設手機型號。

1. 打開頁面後進入 DevTools 的裝置模擬模式。
2. 從 320px 開始慢慢拉寬到 1440px。
3. 記下導覽、卡片、表格、表單開始擁擠或爆版的寬度。
4. 在接近問題發生前的寬度設定 Media Query。
5. 重新測一次，確認切換時沒有突兀跳動或橫向捲動。

如果只測 iPhone 預設尺寸，很容易漏掉中間寬度。很多 RWD 問題就出在 600px 到 900px 這種不上不下的區間。

常見版面怎麼改成響應式？導覽、卡片、雙欄、表格、表單

常見 RWD 版面調整，可以先從雙欄、卡片列表、表格與表單下手。這些區塊最容易在手機爆版，也最能看出 Media Query 是否真的解決使用問題。

雙欄版面在手機改成單欄

雙欄版面在桌機好讀，但在手機通常會太窄。建議手機預設單欄，平板以上再改成主內容加側欄。

.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
.page-layout {
grid-template-columns: minmax(0, 2fr) 320px;
}
}

minmax(0, 2fr) 可以降低內容把欄位撐爆的機率，尤其內文中有長連結、程式碼或表格時很有用。

卡片列表從 1 欄到 2 欄、3 欄

卡片列表適合用 CSS Grid。手機一欄最穩，平板兩欄，桌機三欄，通常已經能處理多數文章列表、產品列表或服務項目。

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

卡片不是欄數越多越好。標題一旦被切得太短，摘要難讀，使用者反而更難比較內容。

表格在手機爆版時怎麼處理

表格是手機版最常出事的區塊。不要只把字縮小，應該依內容重要性選擇橫向捲動、卡片化或欄位精簡。

問題	適合做法	使用情境
欄位很多但都需要保留	外層加橫向捲動	規格表、價格比較、資料表
每列可獨立閱讀	手機改成卡片式資訊	名單、方案、訂單摘要
部分欄位不適合手機顯示	精簡欄位，保留關鍵資訊	後台列表、管理介面

.table-wrap {
  overflow-x: auto;
}
.table-wrap table {
min-width: 720px;
}

手機表單與按鈕的觸控範圍

手機表單要先顧可操作性。欄位太密、按鈕太小、錯誤提示離輸入框太遠，都會讓 RWD 看起來完成了，實際上卻很難用。

• 輸入框高度要足夠，文字不要小到需要放大。
• 主要按鈕要有明確寬度與高度，避免貼太近。
• 錯誤訊息要出現在欄位附近，不要只在頁面頂部顯示。
• 手機鍵盤彈出後，要確認送出按鈕和下一個欄位仍能操作。

RWD 驗收清單：怎麼知道手機、平板、桌機都真的可用

RWD 驗收不能只看頁面有沒有縮放成功，而要檢查文字可讀、按鈕可點、選單可用、表格不爆版、表單能完成，並搭配工具確認手機效能與搜尋相關問題。

人工檢查：字級、按鈕、選單、表格、表單

人工檢查最能抓到真實使用問題。工具可以提醒技術風險，但按鈕好不好點、表單順不順，還是要實際操作。

檢查項目	檢查方式	合格狀態
文字	手機不放大直接閱讀	標題、內文、表格文字都清楚
按鈕	用手指點主要 CTA 與連結	不容易誤點，間距足夠
選單	打開、關閉、點擊子項目	不遮住重要內容，不卡住頁面
表格	檢查小寬度是否爆版	可捲動、可閱讀，沒有整頁橫向捲動
表單	實際輸入、切換欄位、送出	鍵盤彈出後仍能完成流程

工具檢查：DevTools、PageSpeed Insights、Search Console

工具檢查適合用來補人工檢查看不到的問題，例如手機效能、Core Web Vitals、搜尋索引與行動體驗警示。

1. 用 Chrome DevTools 拖曳寬度，檢查斷點切換是否自然。
2. 用 PageSpeed Insights 看手機效能、CLS、INP 與圖片載入問題。
3. 用 Google Search Console 檢查頁面索引、行動體驗與強化項目警示。
4. 若頁面有結構化資料，確認手機版和桌機版輸出的內容一致。

PageSpeed 分數不是唯一標準。分數高但表單難填，仍然不是合格的 RWD 網頁。

RWD 與 SEO / 效能：Media Query 做對還不夠

RWD 對 SEO 的價值在於單一 URL、內容一致、內鏈與結構化資料一致，但 Media Query 做對不代表手機體驗一定好。圖片尺寸、載入速度、CLS、INP 仍然會影響使用者體驗與搜尋表現。

RWD 對 SEO 的真正好處是什麼？

RWD 的 SEO 好處主要是管理一致性。手機和桌機使用同一個 URL，canonical、內鏈、內容、標題、結構化資料比較不容易分裂。

不要把 RWD 當成排名保證。Google 看的是整體頁面品質、內容可用性、載入體驗與技術可存取性。RWD 只是把多裝置體驗做好的一種基礎做法。

手機版圖片太大，RWD 還是會慢

如果手機載入桌機尺寸的大圖，即使版面已經響應式，使用者仍然會覺得慢。RWD 需要搭配圖片與效能最佳化。

• 使用 WebP 或其他適合的現代圖片格式。
• 用 srcset 讓瀏覽器依裝置選擇適合尺寸。
• 非首屏圖片可使用 loading="lazy"。
• 圖片要預留寬高，避免載入後造成 CLS。
• 檢查互動元件是否拖慢 INP，尤其是選單、篩選器與表單驗證。

<img
  src="cover-800.webp"
  srcset="cover-400.webp 400w, cover-800.webp 800w"
  sizes="(max-width: 768px) 100vw, 800px"
  loading="lazy"
  alt="RWD 網頁版面示意">

常見錯誤與修正：斷點太多、版面跳動、圖片太大、表格爆版

RWD 常見錯誤多半不是 Media Query 不會寫，而是斷點過量、內容排序沒有重想、圖片沒有最佳化、表格和表單沒有驗收。修正時要先找出是哪一類問題，再調整 CSS 或內容結構。

斷點設太多，CSS 變得難維護

斷點太多會讓 CSS 很快失控。每多一個 breakpoint，就多一層覆蓋關係，後續改一個卡片或按鈕可能牽動好幾段樣式。

問題	常見原因	修正方向
斷點太多	照抄所有裝置尺寸	保留內容真的需要切換的位置
版面跳動	寬度、間距、字級同時大改	一次只調整必要屬性
圖片太大	手機載入桌機圖	使用 srcset、WebP、正確尺寸
表格爆版	欄位超過手機可讀範圍	橫向捲動、卡片化或精簡欄位

只縮小寬度，沒有重新排序內容

手機版不只是桌機版變窄。桌機可以左圖右文、側欄推薦、表單和說明並排，但手機需要先看主標、重點內容、主要操作，再往下看補充資訊。

如果 CTA 被推到很後面，或表單前面塞了太多次要說明，手機使用者很可能還沒看到重點就離開。這種問題不能只靠調整寬度解決，要回到內容排序。

忘記測實機，DevTools 看起來正常但手機出問題

DevTools 很適合找斷點，但實機仍然要測。手機瀏覽器的網址列、鍵盤彈出、觸控手感、Safari 和 Chrome 差異，都可能讓頁面出現模擬器沒抓到的問題。

• 至少用一台 iOS 和一台 Android 實機檢查主要頁面。
• 測試選單開關、表單輸入、彈窗、篩選器與送出流程。
• 檢查鍵盤彈出後，欄位和按鈕是否被遮住。
• 檢查是否出現整頁橫向捲動。

RWD 實作流程總結：從手機版樣式開始擴充到桌機

RWD 實作可以用一套固定流程完成：先排內容順序，設定 viewport，寫手機版 CSS，再用 Media Query 加上必要斷點，最後用人工與工具檢查手機、平板、桌機是否都可用。

建議流程：內容排序 → viewport → 手機 CSS → 斷點 → 測試 → 效能 → 上線

1. 先確認內容優先順序，決定手機上最先出現的資訊。
2. 設定 viewport，讓瀏覽器用裝置寬度渲染頁面。
3. 先寫手機版 CSS，確保單欄、表單、按鈕都能使用。
4. 用 min-width 加入平板與桌機斷點。
5. 用 Chrome DevTools 拖曳寬度，找出內容真正需要切換的位置。
6. 檢查圖片尺寸、lazy loading、CLS、INP 與手機載入速度。
7. 用實機測試主要流程，確認沒有爆版、誤點或表單卡住。

如果需要先補 RWD 觀念，可以搭配閱讀 RWD 響應式網頁設計；若要理解整體前端分工，可延伸到 前端技術總覽 與 網站架設教學。

不在這裡展開的議題

AWD 長篇比較、網站價格、案例網站、圖片規劃與完整改版流程，和 CSS Media Query 實作不是同一個任務。這些議題可以另外處理，這裡只保留和 RWD 網頁實作直接相關的設定、斷點與驗收。

如果目標是一頁式網站，也可以另外參考 一頁式網頁 的規劃方式，但 RWD 檢查原則仍然相同：手機先能讀、能點、能完成主要操作，再往平板與桌機擴充。

RWD 網頁是什麼？

RWD 網頁是響應式網頁設計，意思是同一個網站會依照螢幕寬度調整版面。常見做法是用 viewport、彈性寬度、CSS Grid 或 Flexbox，再搭配 CSS Media Query 設定斷點。

RWD 一定要用 CSS Media Query 嗎？

多數 RWD 網頁會用 CSS Media Query，因為它能在不同寬度下套用不同樣式。部分簡單版面可以靠彈性寬度、Grid 或 Flexbox 自動調整，但需要明確切換欄數、導覽或表格時，Media Query 仍然很實用。

RWD 的 viewport 一定要設定嗎？

要設定。常見設定是 <meta name="viewport" content="width=device-width, initial-scale=1">。沒有設定時，手機瀏覽器可能用較大的虛擬寬度顯示頁面，導致文字太小或版面縮放異常。

RWD 斷點通常要設幾個？

常見做法是 2 到 4 個主要斷點，例如 768px、1024px、1280px，再視內容需要調整。不要為每一種裝置都設斷點，應該看版面何時需要改變。

min-width 和 max-width 哪一種比較適合 RWD？

新網站通常建議用 min-width 搭配 mobile-first，先寫手機版，再逐步擴充到平板與桌機。舊網站如果原本是桌機版 CSS，短期維護可以用 max-width 往下修手機版問題。

為什麼建議用 mobile-first 寫 RWD？

mobile-first 會先處理最小螢幕上的核心內容、表單與按鈕，避免手機版只是桌機版縮小。這種寫法通常 CSS 較乾淨，也比較符合手機使用者的實際操作情境。

怎麼檢查網站是不是真的適合手機瀏覽？

先用手機實際操作主要流程，再用 Chrome DevTools 拖曳不同寬度檢查爆版。重點看文字是否可讀、按鈕是否可點、選單是否可用、表格是否能閱讀、表單是否能完成。

RWD 網站為什麼手機版還是很慢？

常見原因是手機仍載入過大的圖片、太多 JavaScript、未延遲載入非必要資源，或互動元件太重。RWD 只處理版面響應，速度還需要另外檢查圖片尺寸、lazy loading、CLS 與 INP。

RWD 對 SEO 有幫助嗎？

RWD 對 SEO 的幫助主要在於單一 URL、內容一致、內鏈一致與結構化資料一致。它不會保證排名，但能降低手機版與桌機版內容分裂的風險，並改善行動裝置使用體驗。

RWD 和 AWD 哪個比較好？

一般企業網站、內容網站和部落格多半適合 RWD，因為維護成本較低，也較容易維持內容一致。AWD 適合需要伺服器依裝置輸出不同內容的特殊情境，但不適合作為一般 RWD 實作入門的主軸。

舊網站沒有 RWD，一定要整站重做嗎？

不一定。可以先檢查流量最高、轉換最重要的頁面，針對導覽、表格、表單、主要內容區塊做局部 RWD 修正。若舊 CSS 結構太混亂、模板重複太多，再評估是否整站重做。