RWD（Responsive Web Design）響應式網頁設計，簡單說就是讓同一個網站自動適應所有螢幕：用手機開是單欄，好滑好讀；用電腦開是多欄，版面完整清楚。而這兩種畫面的背後，只有一份程式碼。這個做法由 Ethan Marcotte 提出，早已是現代網站的標準配備。本文用白話拆解 RWD 的技術原理：它在瀏覽器裡怎麼運作、媒體查詢怎麼寫、斷點怎麼抓，以及怎麼搭配 核心網站體驗指標（Core Web Vitals）優化。
本文負責講清楚「RWD 是怎麼運作的」，包含 viewport、彈性網格、彈性圖片、媒體查詢與斷點。其他面向請見下列文章：
- 想知道為什麼企業要做手機版（詢問率、信任感、商業效益）→ 手機版網站對企業的商業價值
- 想比較 RWD 與獨立手機版（成本、SEO、維護）→ RWD vs 獨立手機版網站完整比較與選擇指南
- 想知道手機版首頁怎麼設計（首屏、CTA、表單、選單）→ 手機版首頁應該怎麼設計
- 想排除手機版實作問題（跑版、選單難用、圖片裁切、表格擠壓）→ RWD 網站製作常見錯誤
什麼是 RWD 響應式網頁設計
RWD 是 Responsive Web Design 的縮寫，中文叫響應式網頁設計。最容易理解的比喻是水：水倒進什麼形狀的容器，就變成什麼形狀。RWD 網站就是那杯水：手機、平板、電腦是不同形狀的容器，內容不變，排法自動改變，而且不用為手機和電腦分別做兩個網站。
實際運作時，瀏覽器會先看螢幕有多寬，再依照網站設計師事先寫好的規則決定怎麼排：電腦上可能三欄並排，手機上就自動變成一欄往下排，字不會變小到看不清楚，按鈕也不會擠成一團。
具體來說，RWD 會依螢幕寬度自動調整這些東西：
| 網站元素 | 不同寬度的調整方式 |
|---|---|
| 版面排列 | 電腦多欄並排，手機改成一欄往下排 |
| 圖片尺寸 | 跟著版面縮放，或直接載入比較小的版本 |
| 文字大小 | 維持好讀的字級，不是整頁等比例縮小 |
| 互動元件 | 手機上按鈕加大，手指才不會按錯 |
| 導覽選單 | 電腦顯示完整選單，手機收成漢堡選單 |
| 圖文排列 | 電腦左圖右文，手機改成上圖下文 |
RWD 這個名字，來自 Ethan Marcotte 在 A List Apart 發表的同名文章。他當時提出三個技術基礎：彈性網格（fluid grids）、彈性圖片（flexible images）、媒體查詢（media queries）。本文接下來會用白話一一說明，並補上後來才出現的新工具，例如 viewport meta、CSS Grid、容器查詢、Core Web Vitals 等。
RWD 在瀏覽器裡怎麼運作
RWD 不是某一個單一技術，而是好幾個 CSS 與 HTML 技術的組合拳。瀏覽器打開頁面時，會依序經過下面幾關，最後排出適合這台裝置的版面。
viewport meta 標籤：先告訴瀏覽器「這是手機」
HTML 的 <head> 裡通常會放這一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
翻成白話，這行是在跟手機瀏覽器說：「請照這支手機真正的寬度來排版，不要縮放。」少了這一行，手機會假裝自己是一台 980px 寬的電腦來排版，排完再整頁縮小塞進小螢幕。這就是早期網頁在手機上字小到要用兩指放大才能看的原因。
彈性網格：用「比例」取代「固定像素」
傳統做法是把寬度寫死，例如 width: 1200px，螢幕比 1200px 窄就會破版。RWD 改成講「比例」：不說這個區塊幾 px，而是說它佔畫面的幾成。常用的相對單位如下：
| 單位 | 白話意思 | 常用在哪 |
|---|---|---|
% | 佔外層區塊的幾成 | 區塊寬度、容器 |
rem | 以全站基準字級為單位 | 字體大小、間距 |
em | 以上一層的字級為單位 | 巢狀元素的字級 |
vw / vh | 佔整個畫面寬／高的百分比 | 首屏元素、全螢幕區塊 |
fr | 把剩餘空間分成幾份 | CSS Grid 排版 |
min() / max() / clamp() | 自動算，但設上下限 | 限制字級、寬度範圍 |
實務上排版多半交給 Flexbox 與 Grid，例如：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
翻成白話：「每張卡片至少 280px 寬，放得下幾張就排幾欄，剩下的空間平均分。」瀏覽器會自己算，一行媒體查詢都不用寫。這正是現代 RWD 的核心精神：先讓版面自己會流動，媒體查詢留到真正需要大改版面時才出手。
彈性圖片：讓瀏覽器自己挑對的圖
圖片是 RWD 最常出包的地方。最基本的保險做法是：
img { max-width: 100%; height: auto; }
意思是「圖片最寬不能超出它的格子」，至少不會爆版。進階做法是用 srcset 與 <picture>，等於給瀏覽器一份圖片的「尺寸選單」，讓它自己挑一張剛剛好的：
<!-- 同一張圖、不同解析度(適合一般照片) -->
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="...">
<!-- 不同畫面、不同裁切(適合首頁 Banner) -->
<picture>
<source media="(min-width: 1024px)" srcset="hero-desktop.webp">
<source media="(min-width: 480px)" srcset="hero-tablet.webp">
<img src="hero-mobile.webp" alt="...">
</picture>
兩者的分工很好記：srcset 是「同一張圖、給不同大小的版本」，解決的是速度問題：手機不必下載電腦用的大圖；<picture> 是「乾脆換一張裁切不同的圖」，解決的是構圖問題：電腦上的橫幅圖直接塞進手機會被裁得亂七八糟，不如換一張直式構圖（這個做法叫 art direction）。
媒體查詢：需要大改版面時才出手
當「自然流動」不夠用、版面需要整個換一種排法時，就輪到媒體查詢登場，下一節詳細說明。
媒體查詢怎麼寫、斷點怎麼設
媒體查詢（Media Queries）是 RWD 最有代表性的技術。可以把它想成 CSS 裡的「如果……就……」條件句：如果螢幕小於某個寬度，就改用另一組排版。
基本語法：像在寫條件句
/* 如果螢幕寬度 ≤ 768px, 就把多欄改成一欄 */
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}
/* 如果螢幕寬度 ≥ 1024px, 就顯示完整導覽列 */
@media (min-width: 1024px) {
.nav { display: flex; }
}
/* 寬度在 768px 到 1023px 之間, 隱藏側邊欄 */
@media (min-width: 768px) and (max-width: 1023px) {
.sidebar { display: none; }
}
媒體查詢能判斷的條件不只寬度，還有這些：
| 條件 | 白話用途 |
|---|---|
min-width / max-width | 螢幕多寬（最常用） |
orientation: portrait / landscape | 螢幕是直的還是橫的 |
prefers-color-scheme: dark | 使用者偏好深色模式 |
prefers-reduced-motion | 使用者不想看動畫 |
hover: hover / hover: none | 有沒有滑鼠可以懸停（手機通常沒有） |
pointer: coarse / fine | 用手指點（粗）還是滑鼠點（細） |
hover 與 pointer 這兩個條件特別好用，因為它們判斷的是「對方用手指還是滑鼠」，比用寬度去猜準確得多。很多網站的選單「要滑鼠移上去才會展開」，手機上根本點不開，就是要靠這兩個條件來修。
Mobile-first vs Desktop-first：先做哪一邊
兩種寫法都能做出 RWD，差別只在「先寫哪一邊」。目前主流是 mobile-first。
Mobile-first（推薦）：手機版當預設，再用 min-width 一層層往大螢幕加：
.card { padding: 1rem; }
@media (min-width: 768px) { .card { padding: 2rem; } }
@media (min-width: 1280px) { .card { padding: 3rem; } }
Desktop-first（舊式）：電腦版當預設，再用 max-width 往小螢幕覆寫：
.card { padding: 3rem; }
@media (max-width: 1279px) { .card { padding: 2rem; } }
@media (max-width: 767px) { .card { padding: 1rem; } }
為什麼推薦 mobile-first？理由很實際：手機要下載的 CSS 比較少，速度較快；先在最小、最受限的畫面把內容取捨想清楚，版面反而更精簡；而且這和 Google 以手機版內容為排名依據的邏輯剛好一致。
容器查詢（Container Queries）：看格子，不看視窗
媒體查詢有個先天限制：它永遠只看整個視窗多寬。但實務上常有這種情況：同一個卡片元件，一份放在 300px 寬的側邊欄，一份放在 700px 寬的主內容區。視窗寬度明明一樣，兩張卡片卻該長得不一樣。
容器查詢就是為此而生：讓元件看「自己被放的格子」多寬，而不是看整個視窗。
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: 1fr 2fr; }
}
容器查詢目前所有主流瀏覽器都已支援（Chrome、Firefox、Safari 16+）。它不是要取代媒體查詢，而是分工：整頁版面的切換交給媒體查詢，單一元件的變化交給容器查詢。
為什麼現代網站一定要有 RWD（技術理由）
從技術與工程角度看，RWD 已經是回不去的標準，理由有四個。至於商業層面的理由（手機詢問率、品牌信任、AEO 流量轉換、Mobile-First Indexing 對排名的實際影響），這些對企業主與行銷主管更重要，請見 手機版網站對企業的商業價值 專文。
- 螢幕尺寸太多，根本列不完 早期只要顧「電腦 vs 手機」兩種寬度就好。現在呢？320px 的小手機、375px 的 iPhone、768px 的平板直放、1024px 的平板橫放、1440px 的筆電、2560px 的 4K 螢幕，還有展開變 1812px 的摺疊機、直式的車用螢幕（720×1640px），一個一個做版本是不可能的任務。RWD 是唯一能用一套程式碼把所有寬度都顧到的方法。
-
Google 是看您的「手機版」來排名的
Google 已全面採用行動裝置優先索引（Mobile-First Indexing）。白話說，Google 派來的爬蟲是「手機模式」，它看到什麼，您的排名就依據什麼。RWD 因為手機和電腦共用同一份 HTML，天生就符合這個機制；獨立手機版如果
rel="canonical"與rel="alternate"沒設好，Google 可能把兩個版本當成重複內容，或收錄到錯的那一個。 - 一個網址，什麼都單純 RWD 網站從頭到尾只有一個網址，好處很直接：CDN 只要快取一套頁面，命中率高；客戶用手機把連結分享到 LINE，朋友用電腦打開還是同一頁，預覽圖也一致；測網站速度（LCP、INP、CLS）只要看一套數字，不用手機版電腦版各測一遍。
- 只要維護一套，不會改東漏西 獨立手機版等於養兩個網站：兩套模板、兩套版面、兩套版本。想改一個價格、加一個欄位，就要改兩個地方，在 CMS 後台特別容易漏改其中一邊。RWD 把版面差異全部集中在 CSS 裡，內容永遠只有一份。
做好 RWD 的五個技術原則
不管案子大小，RWD 實作都建議守住以下五個原則。至於手機版首頁的首屏、CTA 位置、表單欄位、選單層級這些設計層面的執行細節，請見 手機版首頁應該怎麼設計 專文。
-
從手機版開始做（Mobile-first）
設計和寫 CSS 都從手機版起步，再用
min-width媒體查詢一層層加上電腦版規則。這不只是流程順序，也是程式碼結構：手機載入的 CSS 更少，而且先在最小的畫面想清楚內容取捨，版面自然精簡。 -
用彈性單位，不要寫死像素
排版用
%、fr、vw；字級用rem與clamp()；間距用rem。其中clamp()特別好用：h1 { font-size: clamp(1.5rem, 4vw, 3rem); }：白話是「標題跟著螢幕變大變小，但最小不小於 1.5rem、最大不超過 3rem」。一行就取代好幾個斷點的字級設定。 -
圖片用 srcset / picture，格式選 WebP 或 AVIF
不是設個
max-width: 100%就完事。完整做法是：同一張圖給多種尺寸（srcset+sizes），讓手機不必下載大圖；電腦橫幅和手機直式構圖差很多時，用<picture>直接換圖；格式優先用 WebP（相容性 95% 以上）或 AVIF（壓得更小，相容性約 90%）；非首屏的圖加loading="lazy"延後載入；每張圖都要寫width/height，不然圖載進來時頁面會跳一下（CLS 位移）。 - 顧好 Core Web Vitals（網站體驗指標） RWD 不只版面要會適應，速度也要在所有裝置上及格。Google 目前主要看下表三個指標。
- 拿真的手機測，不要只看模擬器 瀏覽器 DevTools 的「裝置模擬」很方便，但很多問題只有真機才看得到：iOS Safari 的觸控延遲、Android 的字體渲染差異、平板橫放的版面問題、不同瀏覽器對 CSS 的支援落差。上線前至少用一支 iPhone、一支 Android 實際跑過。
| 指標 | 目標值 | 白話意思與 RWD 注意事項 |
|---|---|---|
| LCP（最大內容繪製） | < 2.5 秒 | 主要內容多快出現。首屏大圖記得用 srcset，別讓手機載電腦版大圖 |
| INP（互動延遲） | < 200 毫秒 | 點下去多快有反應。JS 太重在手機上特別容易卡 |
| CLS（版面位移） | < 0.1 | 頁面會不會亂跳。圖片要寫 width/height，廣告與動態內容先預留空間 |
斷點要設在哪裡？看內容，不是看裝置
RWD 的核心問題不是「電腦放什麼、手機放什麼」（那屬於資訊架構與 UX，請見 手機版首頁設計），而是「版面在哪個寬度該切換排法」，那個切換的寬度就叫斷點（breakpoint）。
什麼時候該設斷點？三個訊號
最實用的判斷法：把瀏覽器視窗從寬慢慢拉窄，盯著版面看，出現以下任何一個訊號，那附近就該設斷點。
| 訊號 | 具體徵兆 |
|---|---|
| 內容變難讀 | 一行字少於 30 字（太碎）或超過 75 字（太長） |
| 版面變擁擠 | 卡片被壓到 280px 以下、按鈕擠成一團 |
| 操作方式改變 | 從觸控換成滑鼠、從漢堡選單換成完整導覽 |
主流斷點區間（當參考就好）
雖然斷點應該由內容決定，但大多數網站最後會收斂到差不多的區間，可以拿來當起點：
| 區間 | 範圍 | 典型版面 |
|---|---|---|
| 手機直式 | 320 – 479px | 單欄、漢堡選單 |
| 手機橫式 / 小平板 | 480 – 767px | 仍以單欄為主，導覽可微調 |
| 平板 | 768 – 1023px | 雙欄或卡片網格 |
| 筆電 / 桌機 | 1024 – 1439px | 主導覽展開、3-4 欄卡片 |
| 大型桌機 | ≥ 1440px | 加邊距，別讓內容拉太寬 |
RWD 的設計與開發流程
一個 RWD 專案的標準流程，大致分成五個階段。
- 先整理內容，再談設計（content-first） 動手畫任何畫面之前，先把網站要放的所有內容區塊和層級列出來。因為 RWD 的本質是「同一份內容、換不同排法」，內容不先定下來，後面的版面都會反覆重做。
- 設計稿從手機版畫起（375px 開始） 設計師先從 375px（iPhone 標準寬度）畫起，確認手機上所有關鍵內容都放得下、看得清楚，再延伸畫 768px（平板）和 1280px（筆電）兩個尺寸。
-
CSS 照設計稿的順序寫
前端工程師用 mobile-first 的寫法，先把手機版樣式寫完，再用
min-width媒體查詢往上疊。設計稿要標清楚斷點行為，例如「768px 以下，三欄卡片變一欄」。 - 真機與多瀏覽器測試 至少測 iOS Safari（觸控延遲、視窗高度、字級問題最常出在這）、Android Chrome、電腦的 Chrome / Firefox / Safari / Edge，加一台平板（iPad 或 Android）。
- 上線前量速度、做調整 用 Google PageSpeed Insights、Lighthouse、WebPageTest 量 Core Web Vitals，重點看「行動裝置」的分數。目標至少 70 分，LCP < 2.5 秒、INP < 200ms、CLS < 0.1。
三個最常見的 RWD 觀念誤解
動手之前，先把三個最容易搞錯的觀念釐清。至於實作層面的常見錯誤（圖片跑版、選單難點、表格擠壓、按鈕誤觸等）與修補方式，請見 RWD 網站製作常見錯誤 專文。
- 誤解 1：Mobile-first 不是「只做手機版」 很多人一聽 mobile-first，以為是「整個網站只顧手機，電腦版就是放大版」。其實 mobile-first 講的是順序：先從手機做起，確認在最小的畫面上內容站得住腳，再往電腦版加料。電腦版還是應該把大螢幕的優勢用好用滿（多欄、完整導覽、豐富視覺），不是被手機版綁住。
- 誤解 2：有 RWD 不等於手機體驗一定好 「網站會自動縮放」只是及格線。手機體驗要真的好，還得重新想過內容順序、按鈕大小、表單欄位、選單層級。這些是設計與 UX 的功課，RWD 技術本身不會自動幫您做。想知道自己網站及不及格，方法很簡單：拿手機從頭跑一次「首頁 → 服務 → 案例 → 詢價」，過程中只要需要放大、一直點錯、等圖片轉半天，就是還有得改。
- 誤解 3：斷點不是看裝置，是看內容 最常被照抄的說法是「768px 給平板、1024px 給電腦」。實際上斷點該設在哪，要看內容還好不好讀、版面還順不順，不是死背裝置尺寸。內容簡單的部落格可能一個斷點（800px）就夠，複雜的儀錶板可能要五個，沒有萬用清單。
px）已經淘汰；流動寬度搭配少量媒體查詢是現在的主流；容器查詢是最新的進階做法，能讓單一元件自己會變形，特別適合會在很多地方重複使用的元件庫。
結論：RWD 是現代網站的基本盤
整理一下：RWD 就是讓網站像水一樣，倒進什麼螢幕就自動變成什麼排法，靠的是 viewport meta、彈性網格、彈性圖片、媒體查詢四個技術，再加上新一代的補強工具（容器查詢、clamp、Core Web Vitals）。在 AI 搜尋時代，它早就不是「加分項」，而是技術上的基本盤。沒有 RWD 的網站不只手機難用，連 Google 收錄、CDN 快取、日常維護都會出問題。
ChatGPT、Perplexity、Google AI Overviews 這些 AI 搜尋引擎抓網頁時，多半是用「手機模式」在看您的網站。也就是說，手機版顯示不全、結構亂掉的網站，被 AI 引用的機會就變低。RWD 不只服務人類訪客，也是讓 AI 搜尋找得到您的入場券。
規劃 RWD 網站時，把這六件事顧好就對了：
- 從手機版開始設計、開始寫 CSS（mobile-first）
- 用彈性單位（
%、rem、clamp、fr），不要寫死像素 - 圖片用
srcset/<picture>給多種尺寸，格式選 WebP / AVIF - 顧好 Core Web Vitals（LCP、INP、CLS）三個速度指標
- 斷點看內容決定，不要照抄裝置清單
- 上線前用真的手機和多種瀏覽器完整測過
RWD 是地基，不是裝潢：它解決「版面會不會適應」，至於「適應之後好不好用」是下一層的功課，涉及商業價值、方案選擇、首頁設計、問題排除，分別請見本群集的其他四篇文章。
常見問答 FAQ
RWD 響應式網頁設計是什麼？
媒體查詢（Media Queries）是什麼？
@media (min-width: 768px) 的意思是「螢幕寬度達到 768px 以上，才套用這組規則」。除了寬度，它還能偵測螢幕直橫向、使用者是否偏好深色模式或減少動畫，甚至能判斷對方用手指還是滑鼠：pointer: coarse 代表觸控、hover: none 代表沒有滑鼠。這兩個條件比寬度更準，是修正「手機上滑鼠懸停效果失效」的關鍵。想在元件層級做響應式，還有進化版的容器查詢，差異請見下方問答。
斷點（Breakpoint）該怎麼判斷？
Mobile-first CSS 和 Desktop-first CSS 有什麼差別？
min-width 一層層往大螢幕加規則；Desktop-first 相反，先寫電腦版再往小螢幕覆寫。目前主流是 mobile-first，理由很實際：手機要下載的 CSS 比較少、速度較快；先在最小的畫面把內容取捨想清楚，版面反而更精簡；也和 Google 以手機版內容為排名依據的邏輯一致。一般企業官網、品牌網站、電商都建議用 mobile-first；Desktop-first 多半只出現在維護多年的舊網站，改版時建議一併轉換過來。
什麼是容器查詢（Container Queries）？跟媒體查詢差在哪？
RWD 和手機版網站一樣嗎？
為什麼網站需要 RWD？
RWD 網站設計要注意什麼？
srcset 圖片、Core Web Vitals、真機測試。另外還有幾個很容易被忽略的細節：手機上的表單一律排成單欄，輸入框高度至少 44px，手指才按得準；下拉選單不要超過三層，手機上幾乎點不到；每張圖片都要寫上 width 與 height，不然頁面載入時會跳動、CLS 分數被扣；最後一定要拿真的 iPhone 和 Android 手機實測，模擬器看不出來的問題，真機一開就現形。首頁怎麼安排請見 手機版首頁應該怎麼設計，做錯了怎麼修請見 RWD 網站製作常見錯誤 專文。
