響應(yīng)式：只需開發(fā)一套界面。

1.自適應(yīng)：

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

2.響應(yīng)式：

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

　　

響應(yīng)式設(shè)計(jì)（RWD）：建立一個(gè)網(wǎng)頁，通過CSS Media Query，Content - Based Breakpoint等技術(shù)來改變網(wǎng)頁的大小適應(yīng)不同分辨率的屏幕。
自適應(yīng)設(shè)計(jì)（AWD）：為不同類別的設(shè)備建立不同的網(wǎng)頁，檢測(cè)到設(shè)備分辨率大小后調(diào)用相應(yīng)的網(wǎng)頁。

1.概念上的區(qū)別

響應(yīng)式就是指網(wǎng)站頁面大小改變顯示不同的布局，就是一個(gè)html網(wǎng)站能夠兼容很多版本的手機(jī)和電腦等終端。

 

自適應(yīng)布局是指通過JS及CSS的控制，借助rem、百分比等相對(duì)度量單位，在不同大小的設(shè)備上呈現(xiàn)相同的網(wǎng)頁。特點(diǎn)就是在不同的屏幕大小下設(shè)置不同的布局格式。

 

2.工作原理的區(qū)別

響應(yīng)式設(shè)計(jì)通過檢測(cè)視口分辨率，針對(duì)不同客戶端在客戶端做代碼處理，來展現(xiàn)不同的布局和內(nèi)容。

 

自適應(yīng)設(shè)計(jì)通過檢測(cè)視口分辨率，來判斷當(dāng)前訪問的設(shè)備是：pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁面。

 

3.頁面設(shè)計(jì)的區(qū)別

響應(yīng)式可實(shí)現(xiàn)一套頁面全部適配；而自適應(yīng)對(duì)頁面做的屏幕適配是在一定范圍：比如pc端（>1024）一套適配,平板（768-1024）一套適配，手機(jī)端（<768）一套適配。由此可見，響應(yīng)式設(shè)計(jì)要考慮的內(nèi)容要比自適應(yīng)設(shè)計(jì)復(fù)雜的多。

 

4.使用不同設(shè)備瀏覽效果的區(qū)別

響應(yīng)式網(wǎng)站是使用不同的設(shè)備瀏覽網(wǎng)站時(shí)，網(wǎng)站樣式風(fēng)格、內(nèi)容和網(wǎng)址都是完全一樣的，PC端和移動(dòng)端屬于同一個(gè)網(wǎng)站模板，數(shù)據(jù)庫完全一致。

 

自適應(yīng)網(wǎng)站是使用不同設(shè)備瀏覽時(shí)呈現(xiàn)不同的網(wǎng)頁，網(wǎng)頁內(nèi)容及版式風(fēng)格或相似或完全不同，和PC端屬于不同的網(wǎng)站模板，數(shù)據(jù)庫內(nèi)容或相同一致，或獨(dú)立不同，目的在于為了符合訪客的瀏覽。

 

響應(yīng)式和自適應(yīng)都有哪些優(yōu)缺點(diǎn)

1.響應(yīng)式的優(yōu)缺點(diǎn)

 

優(yōu)點(diǎn)：響應(yīng)式網(wǎng)站更加方便瀏覽，能夠增加訪客的體驗(yàn)度，無需再單獨(dú)設(shè)計(jì)制作手機(jī)站，PC站即是手機(jī)站，對(duì)于優(yōu)化來講，權(quán)重不分散，更加符合搜索引擎的規(guī)則。

 

缺點(diǎn)：響應(yīng)式網(wǎng)設(shè)計(jì)往往風(fēng)格有些局限，對(duì)于復(fù)雜的框架結(jié)構(gòu)難以實(shí)現(xiàn)。

 

2.自適應(yīng)的優(yōu)缺點(diǎn)

 

優(yōu)點(diǎn)：自適應(yīng)網(wǎng)站可以獨(dú)立設(shè)計(jì)，做任何自己想要的風(fēng)格，還可以做到數(shù)據(jù)庫同步，設(shè)計(jì)方案靈活，可獨(dú)立優(yōu)化符合搜索引擎的規(guī)則。

 

缺點(diǎn)：自適應(yīng)網(wǎng)站的手機(jī)站，有時(shí)無法做到與PC站內(nèi)容完全一致，且工作量大。此外，自適應(yīng)手機(jī)站往往使用不同的子域名或目錄跳轉(zhuǎn)，對(duì)于優(yōu)化來講權(quán)重分散，訪客瀏覽體驗(yàn)仍有缺陷。