自適應網頁設計 Responsive web design (RWD)，又稱響應式網頁設計－淳馨鵝家庄的部落格

最近接到幾個客戶指定要設計自適應網頁(responsive web)，
聽起來滿詫異的，原來「自適應」網頁設計的觀念已經延伸到台灣的網頁市場了!

但仔細詢問需要做「自適應網頁」的原因之後卻發現，大多數的客戶並不了解什麼叫做自適應，
只知道這好像很流行。

自適應網頁設計RWD(響應式、回應式)的確是一個趨勢，尤其是在螢幕解析度紛亂的時代，有手機、平板電腦、電腦螢幕等，每個設備的可視範圍(viewport)都不一樣，光是iphone 3 ~ 5，就有兩種解析度，再加上翻轉過後，解析就又多了兩種。

以下是針對公司同事們的手機所進行的解析度統計列表：

廠牌	直立解析	橫躺解析
HTC OneX	360 x 588	640 x 308
HTC Sensation	320 x 460	534 x 247
HTC New One	360 x 567	640 x 287
Samsung Note2	360 x 567	640 x 287
iphone 4	320 x 401	480 x 441
iphone 5	320 x 444	568 x 320

由表中可以看出光是這三大廠的手機螢幕，就已經讓這篇文章看起來像灌水了，
再加上平板電腦和桌上螢幕，大家就可以知道為什麼我會說這是螢幕解析紛亂的時代。

為了解決螢幕解析的問題，網頁設計於2010年提出了網頁設計的概念。主要的原理是使用同一個HTML網頁，透過Media Query的作用，讓不同解析的介面來套用不同的CSS。

簡單一點來講，「自適應」是讓網頁內容來適應螢幕框架，隨著螢幕解析度不同，同一個網址就能有不一樣的呈現方式，

也由於是在同一個網址上面做排版上的修改，自適應網站必須取捨資訊的呈現。
也必須經由專業的使用者動線分析，才能達到最完美的閱讀效果。