自適應(yīng)與響應(yīng)式有何區(qū)別？自適應(yīng)與響應(yīng)式的區(qū)別說明

本篇文章給大家?guī)�來的�?nèi)容是關(guān)于自適應(yīng)和響應(yīng)式有何區(qū)別？自適應(yīng)和響應(yīng)式的區(qū)別介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

前言

“自適應(yīng)設(shè)計和響應(yīng)式設(shè)計的區(qū)別”是個老生常談的問題，在這里將更加直白的來介紹它們之間的不同之處。

視口

先來了解一個概念（下文中經(jīng)常出現(xiàn)）：
視口：用戶瀏覽信息屏幕尺寸大小（每一個視口后面都是真實一位的用戶）

概念：

響應(yīng)式設(shè)計（Responsive design）：

[百科]：響應(yīng)式設(shè)計是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端—而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。

自適應(yīng)設(shè)計（Adaptive Design）

[百科]：自適應(yīng)設(shè)計指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)計方式及技術(shù)。

不同點

• 比較直觀的不同是：自適應(yīng)：需要開發(fā)多套界面；響應(yīng)式開發(fā)一套界面

• 自適應(yīng)設(shè)計 通過檢測視口分辨率，來判斷當前訪問的設(shè)備是：pc端、平板、手機，從而請求服務(wù)層，返回不同的頁面；響應(yīng)式設(shè)計通過檢測視口分辨率，針對不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容。

• 自適應(yīng) 對頁面做的屏幕適配是在一定范圍：比如pc端（>1024）一套適配,平板（768-1024）一套適配，手機端（<768）一套適配;響應(yīng)式一套頁面全部適配。（可以想象：響應(yīng)式設(shè)計要考慮的內(nèi)容要比自適應(yīng)設(shè)計復(fù)雜的多）

Adaptive design (自適應(yīng)設(shè)計實現(xiàn)原理)：是為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。在app橫行的當下，目前國內(nèi)自適應(yīng)布局應(yīng)用主要集中在視口已經(jīng)很穩(wěn)定的web端，（web端視口大數(shù)據(jù)[2016]）針對筆記本，臺式機進行優(yōu)化體驗。

響應(yīng)式設(shè)計（Responsive design）是一套界面同時運行到pc端、平板、手機端各個不同的視口。通過檢測設(shè)備的分辨率，來對頁面做出不同的布局和內(nèi)容。

共同點

兩者都是優(yōu)化適應(yīng)互聯(lián)網(wǎng)中越來越分化的視口瀏覽體驗，而出現(xiàn)的為視口提供更好的體驗的技術(shù)。用技術(shù)來使頁面適應(yīng)不同分辨率的視口的設(shè)計。

響應(yīng)式優(yōu)缺點和標志

標志

• 面包屑菜單

• 改變?yōu)g覽器寬度會在不同分辨率下顯示不同的布局

優(yōu)點：

• 面對不同分辨率設(shè)備靈活性強

• 能夠快捷解決多設(shè)備顯示適應(yīng)問題

缺點：

• 僅適用布局、信息、框架并不復(fù)雜的部門類型網(wǎng)站

• 兼容各種設(shè)備工作量大，效率低下

• 代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長

• 其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果

• 一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

自適應(yīng)網(wǎng)站優(yōu)缺點和標志

標志

• 大多只是適配單個終端的主流N個主流視口（2-3個）

• 當視口大小低于設(shè)置的最小視口時，界面會出現(xiàn)顯示不全，溢出，并出現(xiàn)橫向滑動指示器（主要出現(xiàn)在pc端，移動端決不允許出現(xiàn)這種情況）

• 總體框架不變，橫線布局的板塊大多會有所減少

優(yōu)點

• 對網(wǎng)站的復(fù)雜程度兼容性更大

• 實施起來代價更低，

• 代碼更高效

• 測試更容易，運營相對更精準（圖片可控性更高）

缺點：

• 在移動端設(shè)計大行其道之下，同一個網(wǎng)站，往往需要為不同的設(shè)備開發(fā)不同的頁面，增加開發(fā)成本

• 當需求改變時，可能會改動多套代碼。流程繁瑣。

服務(wù)于設(shè)計和開發(fā)

理論上來說，響應(yīng)式布局在任何情況下都比自適應(yīng)布局好一些，但在某些情況下自適應(yīng)布局更切實際。
自適應(yīng)布局可以讓你的設(shè)計更加可控，因為你只需要考慮幾種狀態(tài)就萬事大吉了。
但在響應(yīng)式布局中你可能需要面對非常多狀態(tài)——是的，大部分狀態(tài)之間的區(qū)別很小，但它們又的確是不同的，這樣一來就很難確切搞清你的設(shè)計會是什么樣。
同時這也帶來了測試上的難題，你很難有絕對的把握預(yù)測到它會怎樣。
換個角度說，這也是響應(yīng)式布局的魅力所在。相比較來說自適應(yīng)布局有它自己的優(yōu)勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。

其實，無論是哪種設(shè)計理念都是各有優(yōu)缺點，具體的選擇還是要從團隊/項目實際需求出發(fā)去選擇。

以上就是自適應(yīng)和響應(yīng)式有何區(qū)別？自適應(yīng)和響應(yīng)式的區(qū)別介紹的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！