什麼是RWD響應式網頁設計？白話說給你聽，保證看一次就懂！｜RWD教學｜網頁設計知識

網站頁面設計：多個 RWD 網頁版面範例（含觀念＋設計軟體） | 犬哥網站

依本文的響應式網頁教學步驟，加上表格中對響應式與自適應策略的理解與取捨，你可以快速完成rwd網頁設計，並透過Google行動裝置相容性測試驗證品質；最後從提供的響應式網站範例與模板著手，選擇最適合你的開發起點。

RWD（Responsive Web Design）中文翻作「響應式網站設計」，是一種為了讓網頁在各種尺寸的裝置下，畫面都能呈現合適比例的設計原則。 本文將嘗試用簡單的方式，由淺入深來介紹 RWD。 並介紹RWD實作工具像是Flexbox、Grid、或使用 CSS 框架實作 RWD，例如 Bootstrap。

RWD 全名為響應式網頁。 本文將提供完整 RWD 教學，介紹 RWD 網頁和自適應式網頁的差別，以及分享 5 款響應式網站模板和 RWD 範例。

RWD網頁會因應不同裝置自動產生版面變化，至於版面要如何配置則是透過CSS來完成，RWD使用CSS來設計版面，透過螢幕寬度條件來決定版面在不同裝置的呈現方式，我們做了一張圖幫助你更加了解兩者的關係：

今天這篇文章就要來向各位好好說明RWD網頁設計的眉眉角角， 包含RWD設計原理、RWD網頁作品怎麼做？ 和AWD有何區別？ 沒有做RWD網頁程式設計會有什麼影響等等。