【網頁設計必學課】什麼是 RWD 響應式網頁？讓網站自動適應各種裝置螢幕尺寸

RWD 的全名是 Responsive Web Design，中文通常稱為「響應式網頁設計」。

簡單來說，RWD 是一種能讓網站依照螢幕寬度與裝置特性，自動調整版面、圖片、文字與操作方式的網頁設計技術。

不論使用者透過：

• 桌上型電腦
• 筆記型電腦
• 平板
• 大尺寸手機
• 一般智慧型手機

進入網站，看到的仍然是同一個網站、同一組網址與同一套主要內容；差別在於畫面會重新排列成適合目前裝置閱讀與操作的形式。

例如，桌機版可能採用三欄並排，但到了手機版，會改成由上往下排列；桌機上完整展開的導覽列，到了手機上則會收進漢堡選單；左圖右文的產品區塊，也可能改成圖片在上、文字和按鈕在下。

真正的 RWD，不是把桌機版畫面縮小，而是重新安排：

• 閱讀順序
• 字體大小
• 圖片比例
• 按鈕尺寸
• 表單欄位
• 選單方式
• CTA 位置
• 互動效果

讓使用者不需要放大縮小，也不用左右拖動畫面，就能順利瀏覽與完成聯絡、詢價、預約或購買。

在桌機瀏覽器中逐漸縮小視窗，可以觀察到響應式網站的版面轉換。例如：

• 四欄產品卡片縮成兩欄，再變成單欄
• 橫向主選單變成漢堡選單
• 左右並排內容改成上下排列
• 橫式 Banner 改用直式手機圖片
• 大型規格表改成可橫向滑動
• 頁首電話與 LINE 改成底部固定按鈕
• 桌機 Hover 互動改成點擊展開

這些變化不是瀏覽器隨機決定，而是設計師與前端工程師事先規劃不同寬度下的版面規則。

因此，同樣標榜 RWD 的網站，實際使用體驗可能差很多。有些網站只做到畫面不超出螢幕；有些網站則會依照行動裝置的操作習慣，重新安排內容優先順序。後者才是真正有價值的響應式設計。

RWD 背後並不是單一功能，而是多項前端技術共同運作的結果。常見核心包含：彈性的 HTML 結構、CSS Media Query、Flexbox、CSS Grid、百分比與相對寬度、Max-width、響應式圖片、Viewport、Breakpoint、觸控操作調整。

設計 RWD 網站時，前端工程師會先建立具有邏輯的 HTML 結構，再透過 CSS 控制不同裝置下的排列方式。

例如，桌機版的服務卡片可能採三欄：

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

到了較窄的平板版，改成兩欄：

@media screen and (max-width: 1024px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

到了手機版，再改成單欄：

@media screen and (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

同一組內容不需要重做三次，只要依照螢幕寬度套用不同樣式，就能完成版面轉換。

使用 CSS Media Query 做版面切換

Media Query 可以理解成一組條件判斷。當瀏覽器偵測到畫面寬度、方向或裝置特性符合某個條件時，就套用指定 CSS 樣式。例如：

/* 平板與較小螢幕 */
@media screen and (max-width: 1024px) {
  .content-box {
    width: 100%;
    padding: 24px;
  }
}

/* 手機版 */
@media screen and (max-width: 768px) {
  .content-box {
    padding: 20px 16px;
  }
  .main-title {
    font-size: 30px;
    line-height: 1.35;
  }
}

/* 小尺寸手機 */
@media screen and (max-width: 480px) {
  .main-title {
    font-size: 26px;
  }
}

當畫面越來越窄時，網站可以依序調整：欄位數量、文字大小、左右留白、圖片比例、區塊順序、按鈕寬度、選單樣式、表單配置。

常見 Breakpoint 範圍

實務上常見的斷點大致包括：

• 1200px 以上：大型桌機
• 1024px～1199px：一般桌機或小型筆電
• 768px～1023px：平板
• 480px～767px：一般手機
• 479px 以下：小尺寸手機

不過，Breakpoint 不應只依固定裝置型號設定。更好的作法，是觀察內容在什麼寬度開始擁擠，再決定何時切換版面。例如：導覽列文字開始擠在一起，就切換漢堡選單；三欄內容太窄，就改成兩欄；表格無法閱讀，就改成可滑動或卡片；左右排版失去平衡，就改成上下排列。

RWD 不是追著每一台手機設定，而是建立可以應付各種尺寸的彈性系統。

Head 設定 Viewport 為什麼重要？

RWD 網站還需要在 HTML 的 中加入 Viewport 設定：

 name="viewport" content="width=device-width, initial-scale=1.0">

這行程式的作用，是告訴行動裝置：請使用目前裝置的實際寬度顯示網站。

如果沒有設定 Viewport，手機瀏覽器可能會假設網站是一個寬度接近桌機的頁面，再把整個畫面縮小塞進手機。結果常見於：文字非常小、按鈕難以點擊、畫面看似完整卻無法閱讀、使用者必須不斷放大與縮小。因此，Viewport 是 RWD 的基本設定。

不過，只有 Viewport 並不代表網站就具備完整 RWD。真正的響應式設計仍需要搭配 Media Query、彈性版面、圖片處理與行動操作規劃。

早期不少企業會分別製作：一套桌機網站、一套手機版網站。

手機版網址可能使用：m.example.com。

這種方式看似能針對手機獨立設計，實際營運後卻容易出現內容、SEO 與維護問題。

內容需要更新兩次，容易資料不同步

只要修改：公司電話、產品規格、服務內容、活動資訊、圖片、價格、聯絡地址，就必須同步更新桌機與手機兩個版本。只要其中一邊漏掉，就會出現：

• 桌機有新產品，手機找不到
• 桌機已更換電話，手機仍是舊號碼
• 活動已結束，手機版仍顯示優惠
• 兩個版本的文字與圖片不同

如果兩套網站分別由不同廠商維護，問題通常更明顯。

不同網址增加 SEO 管理難度

桌機與手機版使用不同網址時，搜尋引擎需要理解兩個頁面之間的對應關係。網站必須正確設定：Canonical、Alternate、裝置轉址、Sitemap、內容對應。

設定不完整時，可能造成：Google 無法判斷主要版本、桌機與手機頁面收錄不一致、連結訊號分散、分享網址顯示錯誤版本、內容重複管理更加複雜。這不代表獨立手機版一定無法做 SEO，而是技術與維護成本通常高於使用單一網址的 RWD 架構。

維護成本與人力被放大

兩套網站代表：兩套頁面、兩次內容更新、兩組測試、兩套追蹤、兩個可能出錯的版本。長期下來，企業不只增加外包修改費，也需要花更多時間檢查內容是否同步。RWD 使用同一套網址與主要內容，可以大幅降低重複維護的情況。

RWD 成為現代網站主流，不只是因為手機使用者增加，而是它在開發、維護、品牌與數位行銷方面，都更符合多數企業需求。

一套網站同時支援多種裝置

企業不需要分別製作桌機、平板與手機網站。同一套內容可以依照不同寬度重新排列，減少重複開發與資料同步問題。

相較 APP，前期成本與使用門檻較低

如果企業開發 APP，通常還要考慮：iOS、Android、商店上架、版本審核、系統更新、使用者下載、推播權限、裝置相容性。RWD 網站則只要透過瀏覽器即可使用，不需要下載與安裝。對公司介紹、內容閱讀、詢價、預約、訂房、購物與一般會員功能而言，RWD 通常已能滿足多數需求。

當然，如果企業需要離線功能、深度裝置整合或高頻率使用情境，APP 仍有其價值，但不是每一家企業都需要一開始就開發 APP。

不需要下載，點擊連結就能瀏覽

使用者可以從：Google 搜尋、Google Ads、Facebook、Instagram、LINE、Email、QR Code 直接進入網站。網站內容一經更新，所有使用者看到的就是最新版本，不需要等待 APP 更新或重新下載。

維護成本較低

RWD 通常只需要維護：一套內容、一個後台、一組網址、一組 SEO 設定、一套 GA4 與轉換追蹤。和桌機、手機雙網站相比，維護流程更集中。

品牌形象一致

同一個品牌若在桌機、手機與平板呈現完全不同的設計，容易造成辨識混亂。RWD 可以維持一致的：Logo、色彩、字體、圖片風格、按鈕、品牌語氣。版面可以因裝置調整，但品牌識別不需要改變。

符合使用者搜尋習慣

許多使用者在手機上搜尋飯店、餐廳、診所、公司名稱、產品或服務時，仍會先開啟網站。如果網站手機版體驗不佳，使用者未必會耐心改用桌機查看，而是直接返回搜尋結果選擇其他品牌。RWD 能讓網站承接自然搜尋、廣告與社群帶來的手機流量。

有利於連結分享與數據整合

RWD 使用同一組網址，因此不論從哪種裝置分享，網址都相同。這有利於集中：流量、外部連結、社群分享、GA4 數據、廣告轉換、SEO 訊號。也能避免桌機分享手機網址，或手機開啟桌機專用頁面的問題。

RWD 最常見的誤區之一，是版面已經會縮放，但手機仍載入桌機用的大型圖片。例如，桌機 Banner 寬度可能超過 1920px，但手機實際顯示寬度只有數百像素。

如果手機仍下載原始大圖，就可能造成：首頁載入變慢、浪費行動數據、Largest Contentful Paint 延後、使用者等待時間增加、廣告流量快速離開。因此，RWD 不只要處理畫面，也需要處理圖片資源。

使用 srcset 提供不同尺寸圖片

HTML 可透過 srcset 告訴瀏覽器有哪些尺寸可選：

src="banner-default.jpg"srcset="
    banner-small.jpg 480w,
    banner-medium.jpg 800w,
    banner-large.jpg 1600w
  "sizes="
    (max-width: 600px) 480px,
    (max-width: 1000px) 800px,
    1600px
  "alt="蘋果網頁設計 RWD 響應式網頁案例">

srcset 是什麼？

srcset 用來列出可使用的圖片檔案與寬度。

例如：banner-small.jpg 480w 代表這張圖片的原始寬度是 480 像素。瀏覽器會依照螢幕寬度、顯示尺寸與裝置像素密度，選擇合適圖片。

sizes 是什麼？

sizes 告訴瀏覽器，圖片在不同畫面下預計顯示多寬。

例如：(max-width: 600px) 480px 代表畫面寬度小於 600px 時，圖片預計以約 480px 寬度顯示。

src 的作用

src 是預設或備用圖片來源。如果瀏覽器不支援 srcset，仍可讀取 src 中的圖片。

Banner 也可以使用不同視覺素材

有些桌機 Banner 是橫式構圖，直接縮小到手機後，重點可能看不清楚。這時可依裝置使用：桌機橫式 Banner、平板裁切版本、手機直式 Banner。也可以把圖片和文字分離，讓標題、說明與 CTA 使用 HTML 顯示，避免文字被壓縮在圖片中。

真正完整的 RWD，應同時考慮：圖片尺寸、圖片比例、裁切位置、檔案格式、WebP／AVIF、延遲載入、手機版替代素材。

RWD 為什麼是 Google 建議的網站架構？

Google 建議使用響應式網頁設計，主要原因不是 RWD 有額外排名加分，而是它的架構較容易爬取、管理與維護。RWD 通常使用：同一個網址、同一份主要 HTML、同一套內容、CSS 控制不同裝置外觀。這讓搜尋引擎不需要額外判斷桌機版與手機版頁面的對應關係。

✦ Googlebot 只需要處理同一組網址：如果桌機版與手機版分開，Google 需要爬取不同網址，並確認兩者之間的關聯。RWD 使用同一頁面，可降低錯誤轉址、對應設定錯誤、手機頁漏收錄、Canonical 混亂、內容不同步等風險。

✦ 降低多版本內容管理風險：RWD 本身不會自動提高內容品質，但能降低桌機與手機內容不一致的情況。企業只要更新一次，所有裝置都能取得相同資訊。

✦ 符合行動優先索引：Google 採用行動優先索引，代表主要使用行動版內容進行檢索與索引。因此，手機版必須保留重要文字、標題、圖片、Alt、內部連結、結構化資料、主要功能。手機版可以移除純裝飾內容，但不應因為畫面較小，就刪掉重要產品、服務與文章資訊。

現在許多網站的手機流量占比已經非常高，使用者經常在移動中直接用手機搜尋與聯絡。如果網站在手機上出現：文字太小、選單難用、Banner 被裁掉、按鈕太小、表單不方便填、頁面載入過慢、彈窗遮住內容、電話無法直接點擊，就等於將大量已經進入網站的潛在客戶推走。

✦ 影響 SEO 流量：手機版內容若不完整、速度慢或無法正常操作，可能降低網站整體搜尋與使用成效。

✦ 影響 Google Ads：許多廣告點擊來自手機。若 Landing Page 不適合手機，即使廣告成功帶來流量，也可能因表單難填或 CTA 不清楚而失去轉換。

✦ 影響品牌信任：使用者通常不會研究網站為什麼跑版。他們只會直覺認為公司網站很舊、品牌不夠專業、資訊可能不可靠、聯絡起來很麻煩。網站體驗會直接影響企業第一印象。

✖︎  只把桌機版等比例縮小：這會造成字太小、按鈕難點與資訊過於擁擠。

✖︎  手機版直接隱藏大量重要內容：手機版可以簡化裝飾，但不能刪除核心服務、產品、文章與內部連結。

✖︎  所有圖片使用相同尺寸：手機載入大型桌機圖片，會浪費流量並拖慢速度。

✖︎  導覽列只是硬塞進小螢幕：桌機多層選單應重新規劃成適合觸控的漢堡選單或手風琴結構。

✖︎  表格完全沒有手機處理：大型表格若超出畫面，應提供橫向滑動、卡片版或其他替代呈現。

✖︎  固定元素遮住內容：手機版常同時出現 Cookie 通知、LINE 按鈕、電話按鈕、購買列、聊天視窗、彈出廣告。若沒有協調位置，可能遮住表單或重要按鈕。

✖︎  只在一支手機上測試：單一裝置正常，不代表所有螢幕與瀏覽器都正常。

如何判斷自己的網站是否需要重新改善 RWD？

如果網站出現以下狀況，代表行動體驗可能已經影響流量與轉換：

• 手機需要左右滑動才能閱讀
• 文字必須放大才能看清楚
• 圖片或 Banner 重點被裁切
• 選單難以展開或關閉
• 表單欄位超出畫面
• 按鈕太小或距離太近
• 表格無法閱讀
• 手機版載入明顯較慢
• 電話與 LINE 不容易找到
• 桌機有內容，手機版卻消失
• 手機流量很多，詢問卻很少
• 手機跳出率明顯高於桌機
• Google Ads 手機點擊多，但轉換偏低

企業可以透過 GA4 分別查看桌機、手機與平板的：使用者數量、互動率、轉換率、表單完成、電話與 LINE 點擊、電商購買、熱門頁面。如果手機流量占比高，但轉換率長期明顯低於桌機，就應進一步檢查 RWD、速度與操作動線。