SiteServer CMS 如何實現回應式網站——原理篇

如果您覺得文章對您有點用，麻煩在您閱讀、收藏、轉發的時候，順手幫忙點個贊、留個言、加關注，這是我繼續寫下去的絕佳動力。

本篇主要講回應式網站的發展歷程以及原理，重點講解回應式和自我調整的區別。在瞭解這個原理之後，下一篇主要講SiteServer CMS 如何實現回應式網站。

1、回應式網站由來

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

後來隨著顯示器越來越多，以及筆記本的普及，

這種方式的頁面出現了問題。在大屏顯示器上整個頁面顯的特別小，在小屏顯示器上網頁又出現捲軸導致用戶體驗極其的差。為了解決在各種不同大小和解析度的設備上如何正確顯示網站的問題，前前後後也出現了好多種方案。

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

自我調整：後來人們就開始想能不能"一次設計，普遍適用"，即讓同一個頁面自動適應不同大小的設備，從而解決為不同設備提供不同版本的頁面問題。

這就是所謂自我調整佈局解決方案。

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

2、回應式和自我調整的區別

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

回應式網站：https://www.microsoft.com

自我調整網站：http://m.ctrip.com/html5/

回應式和自我調整兩種佈局方式都是為了解決在不同大小和解析度的設備上正確顯示網頁的問題。不同的是兩種佈局方式採取了不同的解決方法而矣。

最開始出現的一種新的佈局方式其實是寬度自我調整佈局。我們平時談論的自我調整佈局，大部分時候指的就是寬度自我調整佈局。

自我調整是為了解決如何才能在不同大小和解析度的設備上呈現同樣的網頁。在網頁內容和佈局主體保持基本不變的前提下，讓同一張個頁面自動適應不同大小和解析度的設備，根據設備螢幕寬度，自動調整網頁內容大小。如下圖所示：

從上圖可以看出採用自我調整佈局的話，不管設備螢幕尺寸如何變化，打開同一個頁面看到的內容和佈局基本上是一樣的，不同的只是內容的尺寸。

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

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

網路上也有網友用這麼一張圖來總結回應式和自我調整的區別：

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

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

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

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

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

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

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

自我調整是使用者請求訪問時會夾帶設備資訊，伺服器據此做出判斷並調適應對應設備樣式檔+HTML內容+JS，返回給流覽器以這種方式回應不同設備。

開心一笑