響應式網頁的話題隨着如今移動互聯網的盛行又被推到了很重要的位置，有相關人士預計，移動互聯網的數據流量將在2015年超越桌面端的流量。
你一定聽說過，我們目前正處在“後PC時代”，這對於前端開發人員來說，意味着應該處理一些用戶行爲上的改變，由此步入一個響應式與自適應設計技術統治的時代。這其中的關鍵點在於web的統一化，也就是說在合理的條件下，無論用戶使用任何設備，都應該傳達相同的內容信息與服務。
What？
2010年，Ethan Marcotte提出了“自適應網頁設計”（ResponsiveWeb Design）這個名詞，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。舉個例子：
（1）當屏幕寬度大於1300像素
（2）當屏幕寬度在600像素到1300像素之間
（3）當屏幕寬度在400像素到600像素之間
（4）當屏幕寬度在400像素以下
響應式的核心優勢在於設計者可以爲所有設備使用同一種模板，只需要用CSS來定製內容在各種大小屏幕上的呈現方式。
響應式網頁的組成關鍵
響應式頁面的實現其實並不算困難，用到的也都是大家比較熟悉的一些技術。
（1）Media Query
Media Query的主要作用是根據不同的分辨率去調整一些不同的樣式。由於目前主流的移動設備都基於ios和Android，這兩者的自帶瀏覽器都是webkit內核，因此我們可以使用viewport屬性和Media Query技術實現響應式網頁。通過這一方法，我們能實現讓基準字號font-size在不同分辨率下顯示不一樣的內容。
（2）Fluid grid
Fluid grid也稱流體佈局，就是在PC端實現的基礎上將一些元素的狂傲由固定調整爲彈性制的百分比或是字體比例等。使用Fluid grid的網站能夠根據屏幕寬度自動調整頁面中每列的寬度，從而保證頁面始終處於完整展現的狀態，並且實現原有的基本功能。
（3）Flex box
Flex box是CSS3新添加的一種模型屬性，它的出現有力的打破了我們常常使用的浮動佈局、實現垂直等高、水平均分、按比例劃分，可以實現許多我們之前做不到的自適應佈局。如果你希望網站能以webapp的外觀呈現在手機用戶面前，那麼，Flex box就是個不錯的方式。Flex box和APP的結構很類似，頭部底部全部固定，而中間部分的高度實現自適應。
另外，與傳統的web開發相比，由於響應式設計的頁面佈局、內容尺寸都發生了一些變化，所以，最終的成品極有可能與設計稿出入較大，還需前端開發人員和設計師多溝通，以免造成不必要的時間浪費。
響應式web設計的優化
在響應式網頁的設計過程中，其中也會涉及到一些用戶體驗方面的問題和弊端，需要進一步的優化。
(1)減輕Javascript庫負載
對於移動端來說，jQuery表現的太過厚重，而現在針對移動端的狀態來說，有jQuery Mobile、YUI、XUI等可供選擇的框架。
（2）減少HTTP請求次數
移動端相比較PC端有一個特殊的限制需要考慮到，就是用戶的網絡流量是有限的。這時候針對這些頁面內部的部分操作，可以使用Ajax異步請求來完成，針對短期內不會變化的一些數據，可以使用服務器端緩存、前端緩存等機制來保存這些數據，這樣可以減少用戶一定的數據請求量。
（3）Javascript和CSS需要儘量壓縮
把頁面中使用的Javascript和CSS進行壓縮之後會有效地減少頁面大小。
（4）用CDN管理頁面資源
CDN的即內容分發網絡，意在儘可能避開互聯網上有可能影響數據傳輸速度和穩定性的環節，使內容傳輸的更穩定。
（5）列表圖片實現“懶”加載
移動終端設備因爲屏幕大小有限，沒有必要將全屏中的圖片一次性加載完成，網頁加載的同時，我們可以選擇逐個加載，當用戶進行滑動頁面的時候，再繼續加載圖片。
（6）圖片顯示的優化處理
根據用戶設備的分辨率來加載不同分辨率下的不同圖片，這樣既能給不同終端的用戶一個很好的視覺體驗，又不會白白浪費用戶的網絡數據流量。
AnyForWebUDC前端將定期發佈Web前端博客，涉及Web前端技術，前端趨勢等相關，敬請期待！