**文章為博主原創(chuàng)文章，這里只是學(xué)習(xí)借鑒收藏，文章最后附有博文鏈接！**
前言
“自適應(yīng)設(shè)計(jì)和響應(yīng)式設(shè)計(jì)的區(qū)別”是個(gè)老生常談的問題，在這里將更加直白的來介紹它們之間的不同之處。
視口
先來了解一個(gè)概念（下文中經(jīng)常出現(xiàn)）：
視口：用戶瀏覽信息屏幕尺寸大小（每一個(gè)視口后面都是真實(shí)一位的用戶）
概念：
響應(yīng)式設(shè)計(jì)（Responsive design）：
[百科]：響應(yīng)式設(shè)計(jì)是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端—而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。
自適應(yīng)設(shè)計(jì)（Adaptive Design）
[百科]：自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)計(jì)方式及技術(shù)。
不同點(diǎn)
? ? 比較直觀的不同是：自適應(yīng)：需要開發(fā)多套界面；響應(yīng)式開發(fā)一套界面
? ? 自適應(yīng)設(shè)計(jì) 通過檢測(cè)視口分辨率，來判斷當(dāng)前訪問的設(shè)備是：pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁面；響應(yīng)式設(shè)計(jì)通過檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容。
? ? 自適應(yīng) 對(duì)頁面做的屏幕適配是在一定范圍：比如pc端（>1024）一套適配,平板（768-1024）一套適配，手機(jī)端（<768）一套適配;響應(yīng)式一套頁面全部適配。（可以想象：響應(yīng)式設(shè)計(jì)要考慮的內(nèi)容要比自適應(yīng)設(shè)計(jì)復(fù)雜的多）
Adaptive design (自適應(yīng)設(shè)計(jì)實(shí)現(xiàn)原理)：是為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測(cè)到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。在app橫行的當(dāng)下，目前國內(nèi)自適應(yīng)布局應(yīng)用主要集中在視口已經(jīng)很穩(wěn)定的web端，（web端視口大數(shù)據(jù)[2016]）針對(duì)筆記本，臺(tái)式機(jī)進(jìn)行優(yōu)化體驗(yàn)。
響應(yīng)式設(shè)計(jì)（Responsive design）是一套界面同時(shí)運(yùn)行到pc端、平板、手機(jī)端各個(gè)不同的視口。通過檢測(cè)設(shè)備的分辨率，來對(duì)頁面做出不同的布局和內(nèi)容。
共同點(diǎn)
兩者都是優(yōu)化適應(yīng)互聯(lián)網(wǎng)中越來越分化的視口瀏覽體驗(yàn)，而出現(xiàn)的為視口提供更好的體驗(yàn)的技術(shù)。用技術(shù)來使頁面適應(yīng)不同分辨率的視口的設(shè)計(jì)。
響應(yīng)式優(yōu)缺點(diǎn)和標(biāo)志
標(biāo)志
? ? 面包屑菜單
? ? 改變?yōu)g覽器寬度會(huì)在不同分辨率下顯示不同的布局
優(yōu)點(diǎn)：
? ? 面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
? ? 能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)：
? ? 僅適用布局、信息、框架并不復(fù)雜的部門類型網(wǎng)站
? ? 兼容各種設(shè)備工作量大，效率低下
? ? 代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長
? ? 其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
? ? 一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況
自適應(yīng)網(wǎng)站優(yōu)缺點(diǎn)和標(biāo)志
標(biāo)志
? ? 大多只是適配單個(gè)終端的主流N個(gè)主流視口（2-3個(gè)）
? ? 當(dāng)視口大小低于設(shè)置的最小視口時(shí)，界面會(huì)出現(xiàn)顯示不全，溢出，并出現(xiàn)橫向滑動(dòng)指示器（主要出現(xiàn)在pc端，移動(dòng)端決不允許出現(xiàn)這種情況）
? ? 總體框架不變，橫線布局的板塊大多會(huì)有所減少
優(yōu)點(diǎn)
? ? 對(duì)網(wǎng)站的復(fù)雜程度兼容性更大
? ? 實(shí)施起來代價(jià)更低，
? ? 代碼更高效
? ? 測(cè)試更容易，運(yùn)營相對(duì)更精準(zhǔn)（圖片可控性更高）
缺點(diǎn)：
? ? 在移動(dòng)端設(shè)計(jì)大行其道之下，同一個(gè)網(wǎng)站，往往需要為不同的設(shè)備開發(fā)不同的頁面，增加開發(fā)成本
? ? 當(dāng)需求改變時(shí)，可能會(huì)改動(dòng)多套代碼。流程繁瑣。
服務(wù)于設(shè)計(jì)和 開發(fā)
理論上來說，響應(yīng)式布局在任何情況下都比自適應(yīng)布局好一些，但在某些情況下自適應(yīng)布局更切實(shí)際。
自適應(yīng)布局可以讓你的設(shè)計(jì)更加可控，因?yàn)槟阒恍枰紤]幾種狀態(tài)就萬事大吉了。
但在響應(yīng)式布局中你可能需要面對(duì)非常多狀態(tài)——是的，大部分狀態(tài)之間的區(qū)別很小，但它們又的確是不同的，這樣一來就很難確切搞清你的設(shè)計(jì)會(huì)是什么樣。
同時(shí)這也帶來了測(cè)試上的難題，你很難有絕對(duì)的把握預(yù)測(cè)到它會(huì)怎樣。
換個(gè)角度說，這也是響應(yīng)式布局的魅力所在。相比較來說自適應(yīng)布局有它自己的優(yōu)勢(shì)，因?yàn)樗鼈儗?shí)施起來代價(jià)更低，測(cè)試更容易，這往往讓他們成為更切實(shí)際的解決方案。
其實(shí)，無論是哪種設(shè)計(jì)理念都是各有優(yōu)缺點(diǎn)，具體的選擇還是要從團(tuán)隊(duì)/項(xiàng)目實(shí)際需求出發(fā)去選擇。
————————————————
版權(quán)聲明：本文為CSDN博主「林大夏」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/li_li_lin/article/details/80675092
