什麼是響應式網站？什麼是自適應網站？怎樣區分？

很長一段時間以來，都以為響應式網站就是自適應網站，這是兩個一樣的概念。後來機緣巧合認識了一位前端大拿，給我好好上了一課，終於能把這兩種網站前端表現形式給講透了。現摘錄如下：

1、響應式網站由來

最開始網站都會被設計成固定寬度的頁麵，最開始的PC顯示器的分辨率種類不多，因為當時電腦本來就少，即使有變化也是 800、900、1050、1200等幾種。比如 GitHub的網頁就是固定寬度為1020px來定製的。

後來隨著顯示器越來越多，以及筆記本的普及，這種方式的頁麵出現了問題。在大屏顯示器上整個頁麵顯的特別小，在小屏顯示器上網頁又出現滾動條導致用戶體驗極其的差。為了解決在各種不同大小和分辨率的設備上如何正確顯示網站的問題，前前後後也出現了好多種方案。

提供不同版本：最開始的解決方法，是為不同的設備提供不同版本的網頁。比如一個站點為PC、Mobile、Pad提供三個不同的版本。這樣做固然保證了效果，但同時要維護好幾個版本比較麻煩，而且網站有多個入口，會大大增加係統架構的複雜度。

自適應：後來人們就開始想能不能"一次設計，普遍適用"，即讓同一個頁麵自動適應不同大小的設備，從而解決為不同設備提供不同版本的頁麵問題。這就是所謂自適應布局解決方案。

響應式： 采用自適應布局的話，如果設備太小，就算網頁能夠根據屏幕大小進行適配，但是在太小屏幕顯示內容過多會看不清楚。為了解決這個問題而衍生出來的一種新的布局方式，那就是響應式布局。

2、響應式和自適應的區別

先給出兩個具體例子讓大家直觀感受一下兩種的效果：

響應式網站：https://www.microsoft.com/zh-cn/

自適應網站：http://m.ctrip.com/html5/

響應式和自適應兩種布局方式都是為了解決在不同大小和分辨率的設備上正確顯示網頁的問題。不同的是兩種布局方式采取了不同的解決方法而已。

最開始出現的一種新的布局方式其實是寬度自適應布局。我們平時談論的自適應布局，大部分時候指的就是寬度自適應布局。 自適應是為了解決如何才能在不同大小和分辨率的設備上呈現同樣的網頁。在網頁內容和布局主體保持基本不變的前提下，讓同一張個頁麵自動適應不同大小和分辨率的設備，根據設備屏幕寬度，自動調整網頁內容大小。 如下圖所示：

自適應布局：網頁內容和布局完全一樣

從上圖可以看出采用自適應布局的話，不管設備屏幕尺寸如何變化，打開同一個頁麵看到的內容和布局基本上是一樣的，不同的隻是內容的尺寸。

這樣就會引發一個問題，那就是如果設備太小，就算網頁能夠根據屏幕大小進行適配，但是在太小屏幕顯示內容過多會看不清楚，從而極大損害用戶體驗。

響應式布局正是為了解決這個問題而衍生出來的一種新的布局方式。它可以自動識別屏幕尺寸並做出相應調整的網頁設計，頁麵布局和展示的內容可能會隨著屏幕尺寸變化而有所變化。如下圖所示：

響應式布局：網頁內容和布局隨著屏幕尺寸變化而變化

網絡上也有網友用這麼一張圖來總結響應式和自適應的區別：

如上圖所示，對於同一個頁麵（圖中的Html），如果用響應式布局來處理的話，用不同設備（電腦、平板、手機）去訪問此頁麵，最後看到的布局和內容有很大不同。

而如果用自適應布局去處理的話，那不管訪問設備如何的不同（上圖是三台尺寸不一樣的手機），最後看到的頁麵內容和布局基本上還是一樣的，就是尺寸略有不同。

進一步詳細說明，如下圖所示，屏幕寬度大於720像素，則4張圖片並排在一行：

如果屏幕寬度在不大於720像素，則4張圖片分成兩行：

如果屏幕寬度在小於600像素話，網站主導航由平鋪變成了下拉：

其實響應式和自適應兩種布局方式從外觀上很難分辨，但從技術角度來說他們運行的機理不同。所以最後從技術角度再來總結一下兩者的區別：

響應式布局不管使用什麼設備都是在服務器把數據推送到瀏覽器後，腳本或CSS自行檢測設備屏幕大小後執行對應的樣式表內容，並且一直通過本地腳本在監聽屏幕大小的變化，隨時做出樣式響應的變化，這是主動的。

自適應是用戶請求訪問時會夾帶設備信息，服務器據此做出判斷並調適應對應設備樣式文件+HTML內容+JS，返回給瀏覽器以這種方式響應不同設備。