很長(zhǎng)一段時(shí)間以來(lái)，都以為響應(yīng)式網(wǎng)站就是自適應(yīng)網(wǎng)站，這是兩個(gè)一樣的概念。后來(lái)機(jī)緣巧合認(rèn)識(shí)了一位前端大拿，給我好好上了一課，終于能把這兩種網(wǎng)站前端表現(xiàn)形式給講透了?，F(xiàn)摘錄如下：
1、響應(yīng)式網(wǎng)站由來(lái)
最開(kāi)始網(wǎng)站都會(huì)被設(shè)計(jì)成固定寬度的頁(yè)面，最開(kāi)始的PC顯示器的分辨率種類不多，因?yàn)楫?dāng)時(shí)電腦本來(lái)就少，即使有變化也是 800、900、1050、1200等幾種。比如 GitHub的網(wǎng)頁(yè)就是固定寬度為1020px來(lái)定制的。
后來(lái)隨著顯示器越來(lái)越多，以及筆記本的普及，這種方式的頁(yè)面出現(xiàn)了問(wèn)題。在大屏顯示器上整個(gè)頁(yè)面顯的特別小，在小屏顯示器上網(wǎng)頁(yè)又出現(xiàn)滾動(dòng)條導(dǎo)致用戶體驗(yàn)極其的差。為了解決在各種不同大小和分辨率的設(shè)備上如何正確顯示網(wǎng)站的問(wèn)題，前前后后也出現(xiàn)了好多種方案。
提供不同版本：最開(kāi)始的解決方法，是為不同的設(shè)備提供不同版本的網(wǎng)頁(yè)。比如一個(gè)站點(diǎn)為PC、Mobile、Pad提供三個(gè)不同的版本。這樣做固然保證了效果，但同時(shí)要維護(hù)好幾個(gè)版本比較麻煩，而且網(wǎng)站有多個(gè)入口，會(huì)大大增加系統(tǒng)架構(gòu)的復(fù)雜度。
自適應(yīng)：后來(lái)人們就開(kāi)始想能不能"一次設(shè)計(jì)，普遍適用"，即讓同一個(gè)頁(yè)面自動(dòng)適應(yīng)不同大小的設(shè)備，從而解決為不同設(shè)備提供不同版本的頁(yè)面問(wèn)題。這就是所謂自適應(yīng)布局解決方案。
響應(yīng)式： 采用自適應(yīng)布局的話，如果設(shè)備太小，就算網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配，但是在太小屏幕顯示內(nèi)容過(guò)多會(huì)看不清楚。為了解決這個(gè)問(wèn)題而衍生出來(lái)的一種新的布局方式，那就是響應(yīng)式布局。
2、響應(yīng)式和自適應(yīng)的區(qū)別
先給出兩個(gè)具體例子讓大家直觀感受一下兩種的效果：
響應(yīng)式網(wǎng)站：https://microsoft/zh-cn/
自適應(yīng)網(wǎng)站：http://m.ctrip/html5/
響應(yīng)式和自適應(yīng)兩種布局方式都是為了解決在不同大小和分辨率的設(shè)備上正確顯示網(wǎng)頁(yè)的問(wèn)題。不同的是兩種布局方式采取了不同的解決方法而矣。
最開(kāi)始出現(xiàn)的一種新的布局方式其實(shí)是寬度自適應(yīng)布局。我們平時(shí)談?wù)摰淖赃m應(yīng)布局，大部分時(shí)候指的就是寬度自適應(yīng)布局。 自適應(yīng)是為了解決如何才能在不同大小和分辨率的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)。在網(wǎng)頁(yè)內(nèi)容和布局主體保持基本不變的前提下，讓同一張個(gè)頁(yè)面自動(dòng)適應(yīng)不同大小和分辨率的設(shè)備，根據(jù)設(shè)備屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁(yè)內(nèi)容大小。 如下圖所示：
自適應(yīng)布局：網(wǎng)頁(yè)內(nèi)容和布局完全一樣
從上圖可以看出采用自適應(yīng)布局的話，不管設(shè)備屏幕尺寸如何變化，打開(kāi)同一個(gè)頁(yè)面看到的內(nèi)容和布局基本上是一樣的，不同的只是內(nèi)容的尺寸。
這樣就會(huì)引發(fā)一個(gè)問(wèn)題，那就是如果設(shè)備太小，就算網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配，但是在太小屏幕顯示內(nèi)容過(guò)多會(huì)看不清楚，從而極大損害用戶體驗(yàn)。
響應(yīng)式布局正是為了解決這個(gè)問(wèn)題而衍生出來(lái)的一種新的布局方式。它可以自動(dòng)識(shí)別屏幕尺寸并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，頁(yè)面布局和展示的內(nèi)容可能會(huì)隨著屏幕尺寸變化而有所變化。如下圖所示：
響應(yīng)式布局：網(wǎng)頁(yè)內(nèi)容和布局隨著屏幕尺寸變化而變化
網(wǎng)絡(luò)上也有網(wǎng)友用這么一張圖來(lái)總結(jié)響應(yīng)式和自適應(yīng)的區(qū)別：
如上圖所示，對(duì)于同一個(gè)頁(yè)面（圖中的Html），如果用響應(yīng)式布局來(lái)處理的話，用不同設(shè)備（電腦、平板、手機(jī)）去訪問(wèn)此頁(yè)面，最后看到的布局和內(nèi)容有很大不同。
而如果用自適應(yīng)布局去處理的話，那不管訪問(wèn)設(shè)備如何的不同（上圖是三臺(tái)尺寸不一樣的手機(jī)），最后看到的頁(yè)面內(nèi)容和布局基本上還是一樣的，就是尺寸略有不同。
進(jìn)一步詳細(xì)說(shuō)明，如下圖所示，屏幕寬度大于720像素，則4張圖片并排在一行：
如果屏幕寬度在不大于720像素，則4張圖片分成兩行：
如果屏幕寬度在小于600像素話，網(wǎng)站主導(dǎo)航由平鋪?zhàn)兂闪讼吕?/p>
其實(shí)響應(yīng)式和自適應(yīng)兩種布局方式從外觀上很難分辨，但從技術(shù)角度來(lái)說(shuō)他們運(yùn)行的機(jī)理不同。所以最后從技術(shù)角度再來(lái)總結(jié)一下兩者的區(qū)別：
響應(yīng)式布局不管使用什么設(shè)備都是在服務(wù)器把數(shù)據(jù)推送到瀏覽器后，腳本或CSS自行檢測(cè)設(shè)備屏幕大小后執(zhí)行對(duì)應(yīng)的樣式表內(nèi)容，并且一直通過(guò)本地腳本在監(jiān)聽(tīng)屏幕大小的變化，隨時(shí)做出樣式響應(yīng)的變化，這是主動(dòng)的。
自適應(yīng)是用戶請(qǐng)求訪問(wèn)時(shí)會(huì)夾帶設(shè)備信息，服務(wù)器據(jù)此做出判斷并調(diào)適應(yīng)對(duì)應(yīng)設(shè)備樣式文件+HTML內(nèi)容+JS，返回給瀏覽器以這種方式響應(yīng)不同設(shè)備。
