RWD 響應式網頁設計是什麼？運作原理、媒體查詢與斷點完整解析

Q: RWD 響應式網頁設計是什麼?

RWD(Responsive Web Design)響應式網頁設計，是讓網站依照手機、平板與電腦等不同螢幕尺寸，自動調整版面、圖片、文字與互動元素的設計方法。它由 Ethan Marcotte 在 2010 年提出，目前已經是現代網頁開發的基本標準。具體運作原理建立在四個技術組合上:(1) viewport meta 標籤告訴瀏覽器以裝置寬度渲染、(2) 彈性網格用 %、fr、vw 等相對單位取代固定像素、(3) 彈性圖片用 srcset 或 提供多解析度版本、(4) 媒體查詢在特定螢幕寬度套用不同 CSS。RWD 與「另外做手機版」最大的差別是「同一份 HTML、不同 CSS 版面」——這讓 SEO、品牌一致性、CDN 快取與維護成本都更好管理。

Q: 媒體查詢(Media Queries)是什麼?

媒體查詢是 CSS 提供的條件式語法，能讓特定 CSS 規則只在符合條件時生效。最常用的條件是螢幕寬度，例如 @media (min-width: 768px) { ... } 表示「螢幕寬度大於等於 768px 時套用以下規則」。除了寬度，媒體查詢還能偵測螢幕方向(orientation)、使用者偏好(prefers-color-scheme 深色模式、prefers-reduced-motion 減少動畫)、互動裝置類型(hover、pointer)等。其中 pointer: coarse(觸控)與 hover: none(無滑鼠)特別重要，比寬度更精準地判斷「使用者是手指還是滑鼠」，是修正手機版懸停效果失效的關鍵。媒體查詢的進化版是容器查詢(Container Queries)——詳細差異見 Q5。

Q: 斷點(Breakpoint)該怎麼判斷?

斷點是「螢幕寬度到達某個值時，CSS 規則切換」的觸發點。正確的判斷方式是看內容，不是看裝置名稱——當版面在某個寬度下開始難讀、擁擠或操作不順時，那裡就是斷點。常見的實務區間是:手機直式 320–479px、手機橫式或小平板 480–767px、平板 768–1023px、筆電桌機 1024–1439px、大型桌機 1440px 以上。但這只是參考起點。判斷方式:(1) 把瀏覽器寬度從寬慢慢拉到窄，看版面在哪裡開始「不對勁」;(2) 在「不對勁的寬度」前一點設斷點;(3) 用真機測試確認。一個簡單的部落格可能只需要一個斷點，一個複雜的儀錶板可能需要五個，沒有萬用清單。

Q: Mobile-first CSS 和 Desktop-first CSS 有什麼差別?

兩種寫法都能達成 RWD，但 mobile-first 是目前的主流寫法。Mobile-first:先寫手機版樣式作為預設，再用 min-width 媒體查詢往上加桌機規則，例如 .card { padding: 1rem; } @media (min-width: 768px) { .card { padding: 2rem; } }。Desktop-first:先寫桌機版，再用 max-width 往下覆寫手機規則。Mobile-first 的優勢:(1) 手機載入的 CSS 較少，效能較好;(2) 預設樣式是更受限的環境，被迫保持精簡;(3) 與 Google mobile-first indexing 的邏輯一致;(4) 維護時容易看出每個斷點疊加了什麼。一般企業網站、品牌官網、電商網站都應採用 mobile-first。

Q: 什麼是容器查詢(Container Queries)?跟媒體查詢差在哪?

容器查詢是 CSS 提供的新工具，能根據父容器寬度(而非整個瀏覽器視窗寬度)調整子元素樣式。語法是 container-type: inline-size(在父元素宣告)+ @container (min-width: 400px) { ... }(在子元素套用)。它與媒體查詢最大的差別:媒體查詢看的是「整個視窗多寬」，容器查詢看的是「我的容器多寬」。在側邊欄與主內容區都會出現的元件(例如卡片)特別好用——同一個卡片元件在 300px 寬的側邊欄會自動變成單欄，在 700px 寬的主內容區會自動變成雙欄，不需要為每個使用情境寫不同 class。容器查詢目前在所有主流瀏覽器都已支援(Chrome、Firefox、Safari 16+)。它不是要取代媒體查詢，而是補強——頁面級別的版面切換仍用媒體查詢，元件級別的響應式用容器查詢。

Q: RWD 網站設計要注意什麼?

技術原則上要注意:mobile-first 思維、彈性單位、srcset 圖片、Core Web Vitals、真機測試。除此之外，還有幾個容易被忽略的實務重點:(1) 表單欄位在手機上一律單欄，輸入框高度至少 44px(蘋果建議的觸控目標);(2) 導覽選單避免做超過三層的下拉選單，手機展開後極難操作;(3) 圖片必須宣告 width/height，否則 Core Web Vitals 的 CLS 分數會嚴重扣分;(4) 真機測試不能省，尤其 iOS Safari 與 Android Chrome 對 CSS 的處理仍有細微差異。具體到手機版首頁該如何安排首屏、CTA 位置、表單欄位、選單層級等設計執行細節，請見手機版首頁應該怎麼設計專文;常見的實作錯誤與修補方法(圖片跑版、選單難用、表格擠壓等)請見 RWD 網站製作常見錯誤專文。

RWD(Responsive Web Design)響應式網頁設計，是讓同一份網站程式碼依照使用者裝置的螢幕寬度，自動調整版面、圖片、文字與互動元素的設計方法。它由 Ethan Marcotte 在 2010 年提出，目前已是現代網頁開發的技術基本盤。本文聚焦 RWD 的技術原理——它在瀏覽器中怎麼運作、媒體查詢怎麼寫、斷點怎麼判斷、容器查詢與核心網站體驗指標（Core Web Vitals）優化怎麼搭配。

本篇在 RWD 主題群集的位置:
本文聚焦 RWD 在瀏覽器中的運作機制——viewport、彈性網格、彈性圖片、媒體查詢與斷點。其他面向請見下列文章:

想知道為什麼企業要做手機版(詢問率、信任感、商業效益)→ 手機版網站對企業的商業價值
想比較 RWD 與獨立手機版(成本、SEO、維護)→ RWD vs 獨立手機版網站完整比較與選擇指南
想知道手機版首頁怎麼設計(首屏、CTA、表單、選單)→ 手機版首頁應該怎麼設計
想排除手機版實作問題(跑版、選單難用、圖片裁切、表格擠壓)→ RWD 網站製作常見錯誤

本篇目錄

一、什麼是 RWD 響應式網頁設計
二、RWD 在瀏覽器裡怎麼運作
三、媒體查詢的語法與斷點策略
四、為什麼現代網站需要 RWD(技術理由)
五、RWD 的核心技術原則
六、不同螢幕寬度下，斷點切換的判斷邏輯
七、RWD 設計與開發流程
八、三個關於 RWD 最常見的觀念誤解
九、結論:RWD 是現代網站的技術基本盤
十、常見問答 FAQ

一、什麼是 RWD 響應式網頁設計

RWD 是 Responsive Web Design 的縮寫，中文稱為響應式網頁設計。它的核心觀念是「同一份內容，依裝置寬度呈現不同版面」——不需要為手機與桌機分別維護兩套網站。

當使用者打開網站時，瀏覽器會偵測螢幕寬度，並根據開發者在 CSS 中設定的規則，套用對應的版面、字級、圖片尺寸與互動元素。例如桌機可能顯示三欄並排，手機則改成單欄上下排列。

RWD 主要會依裝置寬度調整這些網站元素:

網站元素	不同寬度的調整方式
版面排列	桌機多欄並排，手機改成單欄堆疊
圖片尺寸	依容器寬度縮放或載入不同解析度版本
文字大小	維持每個裝置的可讀字級，不直接縮小
互動元件	加大手機點擊範圍，避免誤觸
導覽選單	桌機顯示完整選單，手機改為漢堡或抽屜式
圖文排列	桌機左右並排，手機改成上下堆疊

RWD 由 Ethan Marcotte 在 2010 年於 A List Apart 發表的同名文章中正式命名，原理建立在三個技術基礎之上:彈性網格(fluid grids)、彈性圖片(flexible images)、媒體查詢(media queries)。本文後續會逐一說明，並補充 2010 年後新增的技術——viewport meta、CSS Grid、容器查詢、Core Web Vitals 等。

二、RWD 在瀏覽器裡怎麼運作

RWD 不是任何單一技術，而是一組 CSS 與 HTML 技術的組合。當瀏覽器載入頁面時，會經過以下幾個關鍵步驟，最終呈現適合該裝置的版面。

viewport meta 標籤:告訴瀏覽器不要假裝自己是桌機

HTML 的 <head> 中通常會放這一行:

HTML

<meta name="viewport" content="width=device-width， initial-scale=1.0">

它告訴行動瀏覽器:「網頁寬度等於裝置實際寬度，初始縮放比例為 1」。沒有這一行，行動瀏覽器會用 980px 的「虛擬視窗寬度」渲染頁面，再縮小塞進手機——這就是早期網頁在手機上看起來很小、需要兩指放大的原因。

彈性網格:用相對單位取代固定像素

傳統設計使用固定寬度，例如 width: 1200px。RWD 改用相對單位:

單位	意義	適用情境
`%`	相對於父元素寬度	區塊寬度、容器
`rem`	相對於根元素字級	字體大小、間距
`em`	相對於父元素字級	字體大小(巢狀)
`vw / vh`	相對於 viewport 寬高	首屏元素、全螢幕
`fr`	Grid 軌道彈性單位	CSS Grid 排版
`min() / max() / clamp()`	動態計算	限制字級、寬度範圍

實務上常用 Flexbox 與 Grid 處理排版，例如:

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit， minmax(280px， 1fr));
  gap: 1rem;
}

這段程式碼會自動依容器寬度，把卡片排成 1 欄、2 欄、3 欄或更多——不需要寫任何媒體查詢。這是現代 RWD 的核心精神:讓版面自己會流動，媒體查詢只在必要時介入。

彈性圖片:依容器與裝置解析度自動切換

圖片是 RWD 中最常出問題的部分。基本做法:

CSS

img { max-width: 100%; height: auto; }

進階做法是用 srcset 與 <picture>，讓瀏覽器自動挑選最適合的圖片版本:

HTML

<!-- 同一張圖、不同解析度(適合一般照片) -->
<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 只在特定條件下生效。

基本語法

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`	是否有滑鼠(手機通常 none)
`pointer: coarse / fine`	觸控(粗)或滑鼠(細)

實務重點:hover 與 pointer 特別重要——它們比螢幕寬度更精準地辨別「使用者是用手指還是滑鼠」，是修正手機版懸停效果失效、避免在觸控裝置上出現「需要 hover 才能展開」選單的關鍵。

Mobile-first vs Desktop-first CSS

兩種寫法都能達成 RWD，但 mobile-first 是目前的主流寫法。

Mobile-first(推薦):先寫手機版樣式，用 min-width 往上加:

CSS · Mobile-first

.card { padding: 1rem; }
@media (min-width: 768px) { .card { padding: 2rem; } }
@media (min-width: 1280px) { .card { padding: 3rem; } }

Desktop-first(舊式):先寫桌機版，用 max-width 往下覆寫:

CSS · Desktop-first

.card { padding: 3rem; }
@media (max-width: 1279px) { .card { padding: 2rem; } }
@media (max-width: 767px) { .card { padding: 1rem; } }

Mobile-first 的優勢:手機載入的 CSS 較少(不會載入桌機才會被覆寫的多餘規則)、預設樣式是更受限的環境(被迫精簡)、與 Google mobile-first indexing 的邏輯一致。

容器查詢(Container Queries):元件層級的響應式

媒體查詢的限制是「永遠看整個視窗寬度」。但實務上常遇到一個情況:同一個卡片元件出現在 300px 寬的側邊欄與 700px 寬的主內容區，這時卡片需要根據它所在容器的寬度調整，而不是視窗寬度。

容器查詢就是解決這個問題的工具:

CSS

.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 對排名的實際影響)，這些對企業主與行銷主管更重要，請見手機版網站對企業的商業價值專文。

裝置寬度極度多樣，不可能列舉 2010 年的網頁設計師只需要考慮「桌機 vs 手機」兩種寬度。現代螢幕寬度從 320px(小型手機)、375px(iPhone 標準)、768px(平板直式)、1024px(平板橫式或小筆電)、1440px(標準筆電)、2560px(4K 顯示器)到摺疊機展開後的 1812px，加上直式車載螢幕(720×1640px)與穿戴裝置都不一樣。RWD 是唯一能用一套程式碼涵蓋所有寬度的方法。
Google Mobile-First Indexing 的技術機制 Google 從 2019 年起全面採用行動裝置優先索引，2024 年完成全站遷移。它的技術機制是 Googlebot 用 Smartphone 版的爬蟲抓取網站，並以該版本內容作為排名依據。RWD 因為桌機與手機版共用同一份 HTML，完全符合這個機制;獨立手機版若 rel="canonical" 與 rel="alternate" 設定不當，會被當成重複內容或索引到錯誤版本。
單一 URL 對效能與快取友善 RWD 網站使用單一 URL 結構，對效能優化有三個直接好處:CDN 不需要為桌機與手機分別快取兩套 HTML，命中率較高;使用者用手機分享到 LINE 的連結，桌機朋友打開仍是同一個 URL，OpenGraph 抓圖一致;LCP、INP、CLS 在單一 URL 上量測較單純，不需要拆兩套儀錶。
維護成本與內容一致性工程實務上，獨立手機版需要維護兩套模板、兩套版面、兩套版本控制。當需要新增一個欄位、修改一段文案、調整一個價格時，必須同時改兩個地方——這在 CMS 後台尤其容易出錯。RWD 把所有版型集中在 CSS 媒體查詢與彈性版面，後端與 CMS 不需要為裝置分別處理內容。

台灣中小企業情境補充:許多台灣中小企業官網仍維持「桌機版 + 一個簡化的手機版」雙軌結構，常見問題是手機版資訊不全(例如少了案例頁、產品規格表)，使用者跳回桌機版又跑版難用。導入 RWD 後最大效益不只是技術簡化，更是手機詢問轉換率提升——同一份完整內容、一套維護成本、所有裝置都看得到。

五、RWD 的核心技術原則

不論專案規模大小，RWD 的實作都應遵守以下五個技術原則。具體到手機版首頁該如何安排首屏、CTA 位置、表單欄位、選單層級等設計層面的執行細節，請見手機版首頁應該怎麼設計專文。

採用 Mobile-first 思維與寫法從手機版開始設計與寫 CSS，再用 min-width 媒體查詢漸進加上桌機規則。這不只是設計流程，也是程式碼結構——可降低手機載入的 CSS 量、確保預設樣式相容受限環境。
用彈性單位取代固定像素排版用 %、fr、vw;字級用 rem 與 clamp();間距用 rem。clamp() 特別好用:
h1 { font-size: clamp(1.5rem， 4vw， 3rem); } — H1 字級會跟著 viewport 寬度流動，但不會小於 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 的 Core Web Vitals 目前以下表三項為主。
在真實裝置上測試，不只看設計稿瀏覽器 DevTools 的「裝置模擬」雖然方便，但不能取代真機。實際在 iPhone、Android 手機、平板上開啟，才能發現 iOS Safari 的觸控延遲、Android 的字體渲染差異、平板橫式的特殊版面問題、不同瀏覽器的 CSS 支援差異。

指標	目標值	RWD 相關注意
LCP(最大內容繪製)	< 2.5 秒	首屏圖片要用 srcset 避免載入過大版本
INP(互動延遲)	< 200 毫秒	JS 處理在手機版常成為瓶頸
CLS(版面位移)	< 0.1	圖片必須宣告 width/height，廣告與動態內容預留空間

六、不同螢幕寬度下，斷點切換的判斷邏輯

RWD 的核心問題不是「桌機放什麼、手機放什麼」(這屬於資訊架構與 UX，請見手機版首頁設計)，而是「版面在哪個寬度下應該切換」。

斷點切換的三種觸發條件

觸發條件	何時設斷點
內容開始難讀	段落每行字數低於 30 字、或高於 75 字時
版面開始擁擠	卡片寬度低於 280px、按鈕擠成一團時
互動方式改變	從觸控變滑鼠、從漢堡選單變完整導覽時

主流斷點區間(內容驅動才是準的)

雖然斷點應該由內容決定，但以下是大多數網站會收斂到的「實務區間」，可作為起點:

區間	範圍	典型版面
手機直式	320 – 479px	單欄、漢堡選單
手機橫式 / 小平板	480 – 767px	仍多以單欄為主，導覽可微調
平板	768 – 1023px	雙欄或卡片網格
筆電 / 桌機	1024 – 1439px	主導覽展開、3-4 欄卡片
大型桌機	≥ 1440px	加上邊距防止內容拉太寬

提醒:「平板版常被忽略」「桌機版好看但手機版難用」等具體實作問題與排錯做法，請見 RWD 網站製作常見錯誤專文。

七、RWD 設計與開發流程

RWD 專案的標準開發流程包含以下五個技術階段。

內容架構先行(content-first) 在任何視覺設計之前，先列出網站要承載的所有內容區塊與層級。RWD 的版面差異是「同一份內容、不同排列」，因此內容結構必須先穩定。
Mobile-first 設計稿(從 375px 開始) 設計師從 375px(iPhone 標準寬度)開始繪製設計稿。確認手機版能呈現所有關鍵內容後，再延伸到 768px(平板)、1280px(筆電)兩個尺寸的設計稿。
CSS 撰寫順序對齊設計稿前端工程師依 mobile-first CSS 撰寫方式，先完成手機版樣式，再用 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 觀念。實作層面的常見錯誤(圖片跑版、選單難點、表格擠壓、按鈕誤觸等)與修補方式，請見 RWD 網站製作常見錯誤專文。

誤解 1:Mobile-first 不是「只做手機版」很多人聽到 mobile-first 會誤以為「整個網站只設計手機體驗，桌機只是放大版」。其實 mobile-first 是設計與寫程式的順序——先從手機版開始，確認最受限的環境下內容能成立，再加碼到桌機。桌機版仍然應該充分利用大螢幕的優勢(多欄、完整導覽、豐富視覺)，不是被手機版限制。
誤解 2:有 RWD 不等於手機體驗一定好「網站會自動縮放」只是 RWD 的技術下限。真正好用的手機體驗需要重新思考內容順序、按鈕大小、表單欄位、選單層級——這些屬於設計與 UX 範疇，技術上的 RWD 不會自動處理。判斷自己網站手機版好不好用的方法很簡單:拿手機完整跑一次「首頁 → 服務 → 案例 → 詢價」流程，過程中若需要放大、反覆點錯、等待圖片載入，就是還有改善空間。
誤解 3:斷點不是看裝置，是看內容最常被照抄的觀念是「768px 是平板、1024px 是桌機」。實際上，斷點該設在哪裡應該由內容是否還好讀、版面是否還順暢決定，而不是死守裝置寬度。一個內容簡單的部落格可能只需要一個斷點(800px)，一個複雜的儀錶板可能需要五個——沒有萬用清單。

補充觀念:「固定寬度 → 流動寬度 → 媒體查詢 → 容器查詢」是 RWD 技術四個演進層次。固定寬度(純 px)已被淘汰;流動寬度搭配少量媒體查詢是當前主流;容器查詢是新興進階做法，能在元件層級實現響應式，特別適合可重用元件庫。

九、結論:RWD 是現代網站的技術基本盤

RWD 是讓網站依照螢幕寬度自動調整版面的設計方法，由 viewport meta、彈性網格、彈性圖片、媒體查詢四個技術組合而成，加上現代補強工具(容器查詢、clamp、Core Web Vitals)。在 AI 搜尋時代，它已經不是「加分項目」，而是技術上的基本盤——沒有 RWD 的網站不只手機體驗差，連 Google 索引、CDN 快取與工程維護都會出問題。

ChatGPT、Perplexity、Google AI Overviews 等 AI 搜尋引擎在抓取頁面時，使用的爬蟲多半已採用行動裝置渲染模式。也就是說，網站如果在手機版顯示不全、結構錯位，被 AI 搜尋引擎引用的機會就會降低。RWD 不只服務人類使用者，也是讓 AI 搜尋找到您的基礎門檻。

規劃 RWD 網站時，建議遵守以下技術原則:

採用 mobile-first 設計與 CSS 寫法
用彈性單位(%、rem、clamp、fr)取代固定像素
圖片用 srcset / <picture> 提供多解析度版本，採用 WebP / AVIF
控制 Core Web Vitals(LCP、INP、CLS)
斷點由內容決定，不照抄裝置清單
在真實裝置與多瀏覽器上完整測試

RWD 是技術基礎，不是設計終點——它解決「版面會適應」的問題，但「這個適應後的版面好不好用」是另一個層次的問題。後者涉及商業價值、方案選擇、首頁設計、問題排除，分別請見本群集的其他四篇文章。

十、常見問答 FAQ

RWD 響應式網頁設計是什麼?

RWD(Responsive Web Design)響應式網頁設計，是讓網站依照手機、平板與電腦等不同螢幕尺寸，自動調整版面、圖片、文字與互動元素的設計方法。它由 Ethan Marcotte 在 2010 年提出，目前已經是現代網頁開發的基本標準。具體運作原理建立在四個技術組合上:(1) viewport meta 標籤告訴瀏覽器以裝置寬度渲染、(2) 彈性網格用 %、fr、vw 等相對單位取代固定像素、(3) 彈性圖片用 srcset 或 <picture> 提供多解析度版本、(4) 媒體查詢在特定螢幕寬度套用不同 CSS。RWD 與「另外做手機版」最大的差別是「同一份 HTML、不同 CSS 版面」——這讓 SEO、品牌一致性、CDN 快取與維護成本都更好管理。

媒體查詢(Media Queries)是什麼?

媒體查詢是 CSS 提供的條件式語法，能讓特定 CSS 規則只在符合條件時生效。最常用的條件是螢幕寬度，例如 @media (min-width: 768px) { ... } 表示「螢幕寬度大於等於 768px 時套用以下規則」。除了寬度，媒體查詢還能偵測螢幕方向(orientation)、使用者偏好(prefers-color-scheme 深色模式、prefers-reduced-motion 減少動畫)、互動裝置類型(hover、pointer)等。其中 pointer: coarse(觸控)與 hover: none(無滑鼠)特別重要，比寬度更精準地判斷「使用者是手指還是滑鼠」，是修正手機版懸停效果失效的關鍵。媒體查詢的進化版是容器查詢(Container Queries)——詳細差異見 Q5。

斷點(Breakpoint)該怎麼判斷?

斷點是「螢幕寬度到達某個值時，CSS 規則切換」的觸發點。正確的判斷方式是看內容，不是看裝置名稱——當版面在某個寬度下開始難讀、擁擠或操作不順時，那裡就是斷點。常見的實務區間是:手機直式 320–479px、手機橫式或小平板 480–767px、平板 768–1023px、筆電桌機 1024–1439px、大型桌機 1440px 以上。但這只是參考起點。判斷方式:(1) 把瀏覽器寬度從寬慢慢拉到窄，看版面在哪裡開始「不對勁」;(2) 在「不對勁的寬度」前一點設斷點;(3) 用真機測試確認。一個簡單的部落格可能只需要一個斷點，一個複雜的儀錶板可能需要五個，沒有萬用清單。

Mobile-first CSS 和 Desktop-first CSS 有什麼差別?

兩種寫法都能達成 RWD，但 mobile-first 是目前的主流寫法。Mobile-first:先寫手機版樣式作為預設，再用 min-width 媒體查詢往上加桌機規則，例如 .card { padding: 1rem; } @media (min-width: 768px) { .card { padding: 2rem; } }。Desktop-first:先寫桌機版，再用 max-width 往下覆寫手機規則。Mobile-first 的優勢:(1) 手機載入的 CSS 較少，效能較好;(2) 預設樣式是更受限的環境，被迫保持精簡;(3) 與 Google mobile-first indexing 的邏輯一致;(4) 維護時容易看出每個斷點疊加了什麼。一般企業網站、品牌官網、電商網站都應採用 mobile-first。

什麼是容器查詢(Container Queries)?跟媒體查詢差在哪?

容器查詢是 CSS 提供的新工具，能根據父容器寬度(而非整個瀏覽器視窗寬度)調整子元素樣式。語法是 container-type: inline-size(在父元素宣告)+ @container (min-width: 400px) { ... }(在子元素套用)。它與媒體查詢最大的差別:媒體查詢看的是「整個視窗多寬」，容器查詢看的是「我的容器多寬」。在側邊欄與主內容區都會出現的元件(例如卡片)特別好用——同一個卡片元件在 300px 寬的側邊欄會自動變成單欄，在 700px 寬的主內容區會自動變成雙欄，不需要為每個使用情境寫不同 class。容器查詢目前在所有主流瀏覽器都已支援(Chrome、Firefox、Safari 16+)。它不是要取代媒體查詢，而是補強——頁面級別的版面切換仍用媒體查詢，元件級別的響應式用容器查詢。

RWD 和手機版網站一樣嗎?

不完全一樣。RWD 是常見的手機版實作方式之一，但「手機版」是結果(網站在手機上的體驗)，「RWD」是技術做法。除了 RWD，還有獨立手機版網站(例如 m.example.com 與主網域分開)、Dynamic Serving(同網址但伺服器依 User-Agent 提供不同 HTML)等其他做法，但 RWD 是目前最主流的方式，因為它對 SEO、CDN 快取與工程維護都最友善。台灣中小企業若要選擇做法，通常建議直接採用 RWD——除非有極特殊的需求(例如手機版功能與桌機版完全不同的應用型網站)，否則獨立手機版的維護成本與 SEO 風險都比較高。兩者的成本、SEO、維護差異與選擇邏輯，請見 RWD vs 獨立手機版網站完整比較專文。

為什麼網站需要 RWD?

技術上，RWD 是涵蓋所有螢幕寬度的唯一可行方法，也是 Google mobile-first indexing、CDN 快取效率與工程維護的共同基礎(見本文第四節)。商業上，RWD 直接影響企業詢問率、品牌信任感與 AI 搜尋時代的轉換效率——ChatGPT、Perplexity、Google AI Overviews 等 AI 搜尋引擎抓取頁面時，使用的爬蟲多半已採用行動裝置渲染模式，若您的網站在手機版顯示不全或結構錯位，被 AI 搜尋引用的機會就會降低。對台灣中小企業而言，有沒有 RWD 直接決定了「使用者點進來後是否願意停留並詢價」。商業面的詳細分析請見手機版網站對企業的商業價值專文。

RWD 網站設計要注意什麼?

技術原則上要注意:mobile-first 思維、彈性單位、srcset 圖片、Core Web Vitals、真機測試(見本文第五節)。除此之外，還有幾個容易被忽略的實務重點:(1) 表單欄位在手機上一律單欄，輸入框高度至少 44px(蘋果建議的觸控目標);(2) 導覽選單避免做超過三層的下拉選單，手機展開後極難操作;(3) 圖片必須宣告 width/height，否則 Core Web Vitals 的 CLS 分數會嚴重扣分;(4) 真機測試不能省，尤其 iOS Safari 與 Android Chrome 對 CSS 的處理仍有細微差異。具體到手機版首頁該如何安排首屏、CTA 位置、表單欄位、選單層級等設計執行細節，請見手機版首頁應該怎麼設計專文;常見的實作錯誤與修補方法(圖片跑版、選單難用、表格擠壓等)請見 RWD 網站製作常見錯誤專文。