常見的網頁佈局主要有四種：1.自適應；2.響應式；3.靜態；4.流式。剛剛接觸網頁設計的時候，常常分不清響應式佈局和自適應佈局，其實他們就是“傻傻分不清楚”…
靜態佈局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；對於移動設備，單獨設計一個佈局，使用不同的域名如wap.或m.。
流式佈局（Liquid Layout）
流式佈局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
響應式佈局（Responsive Layout）&自適應佈局（Adaptive Layout）
問：“什麼樣的網站/項目適合使用自適應佈局（固定斷點）？什麼樣的網站適合響應式佈局？（流體網格）”
答：理論上來說，響應式佈局在任何情況下都比自適應佈局好一些，但在某些情況下自適應佈局更切實際。
響應式佈局（Responsive Layout）
自適應佈局可以讓你的設計更加可控，因爲你只需要考慮了了幾種狀態就萬事大吉了。
但在響應式佈局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什麼樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式佈局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到像素級別準確預知你的設計如何在943px×684px
視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特徵還是佈局結構都有條不紊。
自適應佈局（Adaptive Layout）
自適應佈局有它自己的優勢，因爲它們實施起來代價更低，測試更容易，這往往讓他們成爲更切實際的解決方案。自適應佈局可以看做響應式佈局的“窮兄弟”，在資源有限的情況下就可以讓它出馬。特別是改進現有網站的時候尤其奏效，因爲全部重寫代碼在這時並不可行。這種案例中，採用自適應佈局是一個不錯的出發點。Dan Cederholm在他的文章《Adapted》中也曾說過，這種辦法是可行的。
更多產品創意周邊，歡迎直接訂閱我的專題，或關注我的新浪微博、微信訂閱號【產品小妖】
