作為一名優秀的web前端人員，不懂響應式布局怎么可以呢？ 今天跟大家分享web前端開發和設計的干貨：關于響應式布局的設計方法和響應式前端優化。

我們都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的顯示器。

所以，我們設計的網頁不能再按照1024的標準來設計或者是前端重構了。再加上現在移動互聯網的趨勢發展這么良好，錯過移動互聯網這個平臺是我們的最大損失。

因為國內眾多電商網站還是門戶網站，移動端的流量要大于pc端的。

響應式的核心優勢在于設計者可以為所有設備使用同一種模板，只需要用CSS來定制內容在各種大小屏幕上的呈現方式。

一、3種響應式布局的設計方法

1、中心定位，兩側自適應

這種方法是將內容和視覺居中，而且把尺寸控制在1000px以內。左右兩側就放一些輔助信息，讓他們根據屏幕寬度自適應即可。

2、單側定位，中心延伸展開

這個方法就是把主要的內容放在左側。這是我們閱讀習慣所決定的，然后右邊放一些輔助信息。中間這塊是自適應屏幕寬度內容。

3、騰訊稱為的小切糕全屏響應式設計。

其實小切糕全屏響應式設計算是瀑布流里面的一種。是根據屏幕寬度進行計算，以一個比較小的單元格微基礎，然后以2倍，3倍，4倍等方式進行拓展，并計算出最適合的完整組合。通常用在圖片信息展示頁面。

二、響應式布局的組成和常用插件介紹

（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的結構很類似，頭部底部全部固定，而中間部分的高度實現自適應。

10個免費的響應式布局HTML5+CSS3模板|最好的web前端資源

HTML5響應式布局網站模板下載，算是一個響應式布局學習案例。

（4）一套響應式布局HTML5網站網站模板下載-Wee

三、響應式前端設計的優化。主要針對用戶體驗的改進。

(1)減輕Javascript庫負載

對于移動端來說，jQuery表現的太過厚重，而現在針對移動端的狀態來說，有jQuery Mobile、YUI、XUI等可供選擇的框架。

（2）減少HTTP請求次數

移動端相比較PC端有一個特殊的限制需要考慮到，就是用戶的網絡流量是有限的。這時候針對這些頁面內部的部分操作，可以使用Ajax異步請求來完成，針對短期內不會變化的一些數據，可以使用服務器端緩存、前端緩存等機制來保存這些數據，這樣可以減少用戶一定的數據請求量。

（3）Javascript和CSS需要盡量壓縮

把頁面中使用的Javascript和CSS進行壓縮之后會有效地減少頁面大小。

（4）用CDN管理頁面資源

CDN的即內容分發網絡，意在盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的環節，使內容傳輸的更穩定。

（5）列表圖片實現“懶”加載

移動終端設備因為屏幕大小有限，沒有必要將全屏中的圖片一次性加載完成，網頁加載的同時，我們可以選擇逐個加載，當用戶進行滑動頁面的時候，再繼續加載圖片。

（6）圖片顯示的優化處理

根據用戶設備的分辨率來加載不同分辨率下的不同圖片，這樣既能給不同終端的用戶一個很好的視覺體驗，又不會白白浪費用戶的網絡數據流量。

想了解更多關于H5的知識，即可開始你的學霸之旅吧。

《一》：即刻留下你的姓名+電話，會有課程老師為你解答！

《二》：添加咨詢課程老師微信：