前言

你是否有過這樣的經驗？
用手機瀏覽某個網站時，畫面卻小到看不清楚，還得左右滑動才能看完整內容；或者用平板打開網頁時，按鈕位置跑掉，操作變得很不方便。
隨著手機、平板成為我們生活中不可或缺的工具，網站如果不能自動適應各種螢幕，往往會讓人直接關掉網頁，甚至對品牌印象大打折扣。

這正是「響應式網頁設計」（RWD）誕生的原因。
本系列將從零開始，帶你認識並學會 RWD，讓你的網站不論在任何裝置上都能完美呈現！

什麼是 RWD？為什麼每個網站都需要它？

RWD（Responsive Web Design，響應式網頁設計）是一種讓網站能夠自動適應不同裝置螢幕尺寸的設計方式。
無論使用者用手機、平板還是桌機瀏覽，畫面都能保持良好的排版與可讀性，讓每個人都能順利瀏覽網站內容。

核心里念

• 一份程式碼，適配所有裝置
• 讓網站內容自動調整版型，不需為每種裝置寫一個獨立網站
• 提升使用者體驗，減少維護成本
  
  

---

固定寬度、流式設計與 RWD 的差異

設計方式	特點	缺點
固定寬度	版面寬度寫死，設計簡單	行動裝置顯示異常
流式設計	用百分比等相對單位讓版面隨螢幕縮放	複雜排版較難掌控
響應式設計(RWD)	結合媒體查詢與流式設計，針對不同裝置調整	需多思考排版與測試

RWD 最大的優點：

同一份網站程式碼，能自動適應手機、平板、桌機，省時又省力！

---

為什麼要學 RWD？（新手必讀）

• 行動裝置普及：現代人多半用手機上網，RWD 讓網站在手機上也能完美呈現。
• SEO 友善：Google 會優先推薦行動裝置友善的網站，RWD 是提升搜尋排名的關鍵。
• 提升專業形象：網站在各種螢幕下都能正常顯示，給訪客留下好印象。
• 減少維護成本：不用為每種裝置維護不同版本，更新一次就能全平台同步。
  

---

常見裝置與螢幕尺寸

設計 RWD 網站時，常見裝置與螢幕寬度參考如下：

• 手機：320px ~ 480px
• 平板：600px ~ 1024px
• 桌機：大於 1024px
  

此外，還要注意高解析度螢幕（如 Retina）與裝置像素比（device pixel ratio），以確保圖片與內容都能清晰呈現。

---

RWD 的發展歷史與趨勢

• 早期網站多為桌機設計，手機瀏覽體驗不佳
• 2010 年 Ethan Marcotte 提出 RWD 概念，成為網頁設計新標準
• 現今網站設計多以「Mobile First」為主，先設計手機版，再擴展到桌機

---

結論

RWD 是現代網站設計的必備技能，能大幅提升網站的可用性與專業度。