經(jīng)常有客戶會(huì)問呼應式布局和自适應布局會(huì)有什麼(me)樣(yàng)的差異？首要咱們先了解一下什麼(me)是呼應式布局和自适應布局。
呼應式布局：
呼應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，便是一個網站能(néng)夠兼容多個終端——而不是爲每個終端做一個特定的版别。這(zhè)個概念是爲處理移動互聯網閱讀而誕生的。
呼應式布局可認爲不同終端的用戶提供愈加舒适的界面(miàn)和更好(hǎo)的用戶體會(huì)，并且跟著(zhe)現在大屏幕移動設備的遍及，用大勢所趨來描述也不爲過(guò)。跟著(zhe)越來越多的規劃師選用這(zhè)個技能(néng)，咱們不隻看到很多的創新，還(hái)看到了一些成(chéng)形的模式。
自适應布局：
自适應網頁規劃（Responsive Web Design）指能(néng)使網頁自适應顯示在不同巨細終端設備上新網頁規劃方式及技能(néng)。
跟著(zhe)4G的遍及，越來越多的人使用手機上網。
移動設備正超越桌面(miàn)設備，成(chéng)爲拜訪互聯網的最常見終端。于是，網頁規劃師不得不面(miàn)臨一個難題：如何才能(néng)在不同巨細的設備上呈現相同的網頁？
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都(dōu)在1000像素以上（現在主流寬度是1366×768），有的還(hái)達到了2000像素。相同的内容，要在巨細迥異的屏幕上，都(dōu)呈現出滿足的效果，并不是一件簡單的事(shì)。
很多網站的處理方法，是爲不同的設備提供不同的網頁，比方專門提供一個mobile版别，或者iPhone / iPad版别。這(zhè)樣(yàng)做固然确保了效果，但是比較麻煩，一起(qǐ)要保護好(hǎo)幾個版别，并且假如一個網站有多個portal（入口），會(huì)大大添加架構規劃的複雜度。
于是，很早就(jiù)有人設想，能(néng)不能(néng)"一次規劃，普遍适用"，讓同一張網頁自動适應不同巨細的屏幕，根據屏幕寬度，自動調整布局（layout）。
那制造網站的時分“什麼(me)樣(yàng)的網站/項目合适使用自适應布局（固定斷點）？什麼(me)樣(yàng)的網站合适呼應式布局？（流體網格）”
理論上來說，呼應式布局在任何情況下都(dōu)比自适應布局好(hǎo)一些，但在某些情況下自适應布局更切實際。
自适應布局能(néng)夠讓你的規劃愈加可控，因爲你隻需要考慮了了幾種(zhǒng)狀況就(jiù)萬事(shì)大吉了。但在呼應式布局中你可能(néng)需要面(miàn)臨十分多狀況——是的，大部分狀況之間的差異很小，但它們又的确是不同的——這(zhè)樣(yàng)一來就(jiù)很難切當搞清你的規劃會(huì)是什麼(me)樣(yàng)。一起(qǐ)這(zhè)也帶來了測驗上的難題，你很難有肯定的掌握預測到它會(huì)怎樣(yàng)。換個角度說，這(zhè)也是呼應式布局的魅力地點。通過(guò)答應表面(miàn)上的不确認要素存在，你能(néng)夠獲得更高層次上的确認。雖然你無法在精确到像素等級準确預知你的規劃如何在943px×684px視覺區域彙中展示，但你能(néng)确認的是它們一定能(néng)展示的很好(hǎo)——不管是表層特征仍是布局結構都(dōu)有條有理。
自适應布局有它自己的優勢，因爲它們實施起(qǐ)來代價更低，測驗更簡單，這(zhè)往往讓他們成(chéng)爲更切實際的處理方案。自适應布局能(néng)夠看做呼應式布局的“窮兄弟”，在資源有限的情況下就(jiù)能(néng)夠讓它出馬。特别是改善現有網站的時分特别奏效，因爲全部重寫代碼在這(zhè)時并不可行。這(zhè)種(zhǒng)案例中，選用自适應布局是一個不錯的出發(fā)點。
其實無論是哪種(zhǒng)規劃理念都(dōu)是各有優缺的，仍是要從個人實際需求出發(fā)去挑選！