在2010年，Ethan Marcotte提出了“Responsive Web Design”這個名詞，指可以自動識別屏幕寬度、并做出相應調(diào)整的網(wǎng)頁設(shè)計。使網(wǎng)站的頁面布局能夠根據(jù)不同設(shè)備和分辨率進行自動調(diào)整。然而翻譯成中文是，自適應網(wǎng)頁設(shè)計、響應式網(wǎng)頁設(shè)計。
換句話說，自適應網(wǎng)頁設(shè)計也是響應式網(wǎng)頁設(shè)計，響應式網(wǎng)頁設(shè)計也是自適應網(wǎng)頁設(shè)計。但是真正的細分起來，自適應只是響應式的一個子集，指網(wǎng)頁中整體大圖的自適應或者banner的自適應。響應式網(wǎng)頁(自適應網(wǎng)頁，下面我們都稱為“響應式網(wǎng)頁”)可以一個網(wǎng)站兼容多個不同終端。
響應式網(wǎng)頁設(shè)計優(yōu)勢：流體網(wǎng)格的網(wǎng)站適合響應式網(wǎng)頁設(shè)計。
1、靈活性強，可以一個網(wǎng)站兼容多個不同終端;
2、方便快捷的解決多設(shè)備顯示適應問題;
雖然響應式/自適應網(wǎng)頁設(shè)計會帶來兼容各種設(shè)備，但是它也有缺點，工作量大、代碼累贅、加載時間長，它們能“一次設(shè)計，普遍適用”，可以根據(jù)屏幕分辨率自適應以及自動縮放圖片、自動調(diào)整布局，它們不只是技術(shù)的實現(xiàn)，更多的是對于設(shè)計的全新思維模式。對于這些缺點，然而后面的技術(shù)給響應式問題進行了優(yōu)化。
(1)減輕Javascript庫負載
而現(xiàn)在針對移動端Javascript庫負載問題，有jQuery Mobile、YUI、XUI等可供選擇的框架解決方案。
(2)減少HTTP請求次數(shù)
移動端設(shè)配與PC端設(shè)備比較，有一個特殊的限制要想到，就是用戶的網(wǎng)絡(luò)流量是有限的(不過這個問題在一線城市還好一些，走到哪里都有無線網(wǎng)，但是總有沒有無線網(wǎng)的，多以忘了流量還是有限制的)。這時可對某些頁面內(nèi)部的部分操作，用Ajax異步請求來完成，對短期內(nèi)不會變化的一些數(shù)據(jù)，可用服務(wù)器端緩存、前端緩存等機制來保存這些數(shù)據(jù)，從而達到減少用戶一定的數(shù)據(jù)請求量。
(3)Javascript和CSS需要盡量壓縮
可使頁面中使用的Javascript和CSS進行壓縮。
(4)用CDN管理頁面資源
CDN的即內(nèi)容分發(fā)網(wǎng)絡(luò)，意在盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的環(huán)節(jié)，使內(nèi)容傳輸?shù)母€(wěn)定。
(5)列表圖片實現(xiàn)“懶”加載
因移動終端設(shè)備屏幕大小有限問題，可沒有必要將全屏中的圖片都一次性加載完成，網(wǎng)頁加載的同時，我們可以選擇逐個加載，當用戶進行滑動頁面的時候，再繼續(xù)加載圖片。
(6)圖片顯示的優(yōu)化處理
依據(jù)用戶設(shè)備的分辨率來加載不同分辨率下的不同圖片，來達到更佳的用戶體驗，又不會白白浪費用戶的網(wǎng)絡(luò)數(shù)據(jù)流量。
海淘科技科技官網(wǎng)也是響應式網(wǎng)站，你可以在多個網(wǎng)絡(luò)終端，嘗試一番。你的想擁有更多的用戶群體，或者讓你的用戶不受網(wǎng)絡(luò)終端設(shè)備的限制，查看你的網(wǎng)站，查看你產(chǎn)品或服務(wù)的信息，可直接聯(lián)系海淘科技客服哦。海淘科技還提供了更多的app設(shè)計資訊。
