常見的排版線上切換比較

RWD、AWD 幾種常見的排版線上切換比較

這幾年在行動裝置的多種解析度需求之下，Responsive Web Design (RWD) 已經成為網頁排版的顯學，除此之外其實還有 Adaptive Web Design (AWD)，你知道他們的差別嗎？
Liquidapsive 這個網站讓你可以輕鬆地切換RWD、AWD、Liquid layout、Static layout 做個比較，來試試看吧。

複習兩者差異

最後來複習一下這兩種 Web Design 實作上的差異：

RWD

Responsive Web Design (RWD, 響應式設計)：在瀏覽器端判別裝置的解析度大小，再藉由 CSS3 的 Media Query 方法來載入對應的CSS，讓同一個網頁自動套用不同的 CSS 變化版面配置，。

AWD

Adaptive Web Design (AWD, 適應式設計)：由伺服端判斷後，因應不同裝置而回傳不同版本的網頁內容給瀏覽器顯示，這種方式可以針對個別裝置設計一套專屬的檔案，例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等，檔案內容不必包山包海，也因為要針對不同裝置設計不同的流程，相對起來較費工。