打從2013年之中最夯的網頁設計不外乎就是"自適應網站(響應式網站) Responsive Design"設計了，中文譯名為「自適應網頁設計」或「響應式網頁設計」，就字面上意思來說就是當一個網頁在不同的解析度下，會呈現不同的介面，也就是在不同的介面上適應。

會這麼熱門的原因是，這幾年來隨著智慧型手機/平板電腦等行動裝置開始興起之後，有許多人都開始使用行動裝置來閱讀網頁。而傳統的網頁只有為傳統PC 做設計的動作，在行動裝置上並不能呈現最好的效果，所以就有了 Responsive Web Design 這個網頁設計新名詞。

何謂 "Responsive Web Design"?

簡單來說，就是讓一個網頁在傳統電腦、手機/平板電腦上都可以有好的瀏覽效果，而這個我們就稱為 Responsive Web Design。

如以下的案例，我們用 惡魔咖啡 的網站來做示範：

傳統電腦1440x900px瀏覽網站如下圖

 

手機上顯示：

因為手機/平板螢幕比起傳統電腦小了些，所以顯示的方式就自動調整式何閱讀的比例。

上面幾個顯示不同，但是卻是同一份 HTML 網頁，使用 CSS Media Query 做調整，就是 Responsive Web Design。

如果這個網站沒有做 Responsive Web Design，那它的顯示方法會和傳統 PC 一樣，造成使用者還要把網頁拉大才能閱讀。

為什麼要做 Responsive Web Design?

Responsive Design 設計在目前算是很新的一項設計，在台灣知道的網站設計業者並不算太多，學校也沒有教。

而做 Responsive Web Design 設計最大的目的是：因為越來越多人要用手機、平板來瀏覽網頁。是的，Responsive Web Design 就是因為這樣而生的，為了要讓手機/平板的使用者有更好的體驗。

優點：

1.開發成本比 APP 低：
因為 Responsive Web Design 通常可以直接用 Media Query 直接寫搭配行動裝置的 CSS ，與 APP 的成本比較下來較低。

2.可以同時針對許多不同裝置分別調整：
通常做都是利用 CSS3 的 Media Queries 方法來實現，我們使用最新的 CSS 語法來對許多裝置做設計(一個網站需針對電腦、手機/平板橫直式瀏覽與測試)，不論是小螢幕到的智慧型手機、螢幕大的平板、解析度超高的 iPad、都可以支援"自適應網站(響應式網站) Responsive Design"設計。

3.“以RWD進行網站製作製作，其實您就已經開始做 SEO了！”