RWD是什麼？RWD響應式網頁概念一篇解析

RWD (Responsive Web Design)，中文稱為「響應式網頁設計」，核心概念是「一個網站，多種呈現」。 想像一下，您的網站內容就像「水」，而使用者的裝置（電腦、平板、手機）就是不同形狀的「容器」。

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

RWD（Responsive Web Design）中文翻作「響應式網站設計」，是一種為了讓網頁在各種尺寸的裝置下，畫面都能呈現合適比例的設計原則。 有一種更容易理解 RWD 概念的比喻是「內容就像水」。 當你在設計網站排版時，能根據 RWD 的設計原則實作，網站內容就會像水一般，在各種裝置中自然的流動成最適當的樣子。 上圖以 Medium為例，當你試著調整視窗寬度時，會發現網頁內容隨著寬度變小而變換版面，我們就可以說這個網站符合 RWD 的設計原則。 在「tw.alphacamp.co」查看更多資訊

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

常常聽到響應式網頁，但是怎麼做呢？ 響應式設計 (Responsive web design)指的是使網頁內容在不同裝置下，都可以呈現出適切的內容。

響應式網頁設計（Responsive Web Design ,RWD）是一種網頁前端技術的作法， 在相同網址中，網頁可因應不同裝置寬度 (電腦、平版、手機)可自動產生不同的版面變化，讓網站在不同的裝置間保持正常運作。

響應式網頁設計 (Responsive Web Design)簡稱RWD，又稱回應式網頁設計，是Google推薦的網頁製作技術，RWD讓不同裝置都可以瀏覽同一網站，提供最佳的視覺體驗。