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

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

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

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

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

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

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

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

響應(yīng)式實現(xiàn)參考： 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