一天到晚的聽人吹什么響應式設計，具體問又支支吾吾，打不出個具體所以然來，今天我就大概講一下響應式設計，順便講一下其它的幾種設計的區別。 現在前端存在著這么幾個布局： 1.靜態布局（Static Layout） 即傳統Web設計，對于PC設計一個Layout，頁面上的控件都是固定大小，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 對于移動設備，單獨設計一個布局，使用不同的域名如wap.或m.。 2.流式布局（Liquid Layout） 流式布局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。 白話：頁面元素用百分比設定，隨著不同的分辨率或者不同瀏覽器顯示不同 3.自適應布局（Adaptive Layout） 自適應布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。 你可以把自適應布局看作是靜態布局的一個系列。 通常是用到CSS hack;

Hack是基于開源的程序的基礎，對其代碼進行增加、刪除或者修改、優化，使之在功能上符合新的需求。

css hack:我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。

4.響應式布局（Responsive Layout） 分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。 可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

之前想過：最開始其實想錯了，自適應布局就是通過百分比布局，而響應式則是布局也大變樣了；其實這是流式布局和響應式布局的區別；自適應并不是通過百分比來使各種瀏覽器適應的；而也是通過各種不同的css來布局的；

而且布局不一定局限到css上，因為不同瀏覽器所解釋的不同，js有時候也得用不同的代碼，這也叫自適應。 主要理解清楚自適應布局和響應式布局的區別 從圖中可以看出，響應式設計是一對多的方式，自適應設計是一對一的方式。換句話說，響應式設計用一套代碼寫出的網頁適應多個設備，而自適應設計用一套代碼寫出的網頁自適應一個設備，不同的設備需要單獨定義。

自適應只是響應式的一個子集 自適應：不改變布局 響應式：布局隨著頁面大小不同而改變 響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗 因為響應式布局可以改變布局，所以一行顯示幾個可以根據屏幕的大小單獨確定，這就增強了用戶體驗；

那制作網站的時候“什么樣的網站/項目適合使用自適應布局（固定斷點）？什么樣的網站適合響應式布局？（流體網格）” 理論上來說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。 自適應布局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什么樣。同時這也帶來了測試上的難題，你很難有絕對的把握預測到它會怎樣。換個角度說，這也是響應式布局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到像素級別準確預知你的設計如何在943px×684px視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特征還是布局結構都有條不紊。 自適應布局有它自己的優勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。自適應布局可以看做響應式布局的“窮兄弟”，在資源有限的情況下就可以讓它出馬。特別是改進現有網站的時候尤其奏效，因為全部重寫代碼在這時并不可行。這種案例中，采用自適應布局是一個不錯的出發點。 其實無論是哪種設計理念都是各有優缺的，還是要從個人實際去求出發去選擇！ 這次首先弄清楚了響應式的具體概念，以后對響應式也不再那么迷茫，以后有時間通過以下網址的參考講一下響應式的具體實現；

響應式實現參考： http://blog.csdn.net/zxl1033394132/article/details/50574382 https://www.zhihu.com/question/20976405 http://baike.baidu.com/link?url=3IXk1ItK6G0TEwxiuw3rF6Fgl5JKfqDN-l4afjRXsBuWl8IqlnYoketNXIbFIZwRa2LLPQBKThqicD8V8rcYoOBulcPHD5n-iJYtKJRTnWBC8o9Y4AXQYM0zNXUTQW5Xmhq-wWAfrLh7eAbedKO0q_ http://caibaojian.com/356.html http://blog.csdn.net/kalision/article/details/22305393