第一：正確理解響應(yīng)式布局
響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端-而不是為每個終端做一個特定的版本。打個比方來說：現(xiàn)在社會有很多響應(yīng)產(chǎn)品置媳，例如折疊沙發(fā)于樟，折疊床等等，當(dāng)我們需要把沙發(fā)放到一個角落的時候拇囊，此刻沙發(fā)就好比div吧隔披，而角落里的某個地方就好比父元素，由于父元素空間的改變寂拆，我們不得不調(diào)整div,讓它能夠依然放在角落里奢米。在項(xiàng)目中會遇到不同的終端，由于終端分辨率不同纠永，所以要想讓用戶體驗(yàn)更好鬓长，就要讓頁面能夠兼容多個終端。
第二：響應(yīng)式設(shè)計的步驟
1.布局及設(shè)置meta標(biāo)簽
當(dāng)創(chuàng)建一個響應(yīng)式網(wǎng)站尝江，或者非響應(yīng)式網(wǎng)站變成響應(yīng)式的時候涉波，首先要關(guān)注元素的布局。在創(chuàng)建響應(yīng)式布局的時候先寫非響應(yīng)式布局炭序，頁面固定寬度大小啤覆。如果完成了非響應(yīng)式那么再去添加媒體查詢（Media Query)和響應(yīng)式代碼。這種操作更容易實(shí)現(xiàn)響應(yīng)式特性惭聂。
當(dāng)你已經(jīng)完成了無響應(yīng)的網(wǎng)站窗声，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標(biāo)簽之間辜纲。這將設(shè)置屏幕按1：1的尺寸顯示笨觅，在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁面耕腾。
<meta name="viewport" content="width=device-width,initial- scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable屬性能夠解決ipad切換橫屏之后觸摸才能回到具體尺寸的問題见剩。
2.通過媒體查詢來設(shè)置樣式media query
media query 是響應(yīng)式設(shè)計的核心，它能夠和瀏覽器進(jìn)行溝通扫俺，告訴瀏覽器頁面如何呈現(xiàn)苍苞，假如一個終端的分辨率小于980px，那么可以這樣寫
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}
這里面的樣式會覆蓋掉之前所定義的樣式狼纬。
3.設(shè)置多種視圖寬度
假如我們要兼容ipad和iphone視圖羹呵，我們可以這樣設(shè)置：
/ipad/
@media only screen and (min-width:768px)and(max-width:1024px){}
/iphone/
@media only screen and (width:320px)and (width:768px){}
4.字體設(shè)置
到目前為止，開發(fā)人員用到的字體單位大部分都是像素畸颅，雖然像素在普通網(wǎng)站上是Ok的担巩，但是我們?nèi)匀恍枰憫?yīng)式字體。一個響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度没炒，這樣才能適應(yīng)客戶端屏幕涛癌。
css3引入了新的單位叫做rem和em類似但對于Html元素，rem更方便使用送火。
rem是相對于根元素的拳话，不要忘記重置根元素字體大小：
html{font-size:100%;}
完成后种吸，你可以定義響應(yīng)式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
5.響應(yīng)式設(shè)計需要注意的問題
<1>寬度不固定弃衍，可以使用百分比
#head{width:100%;}
#conten{width:100%;}
6.圖片處理
指圖片處理的萬能方法，就是圖片液態(tài)化坚俗【刀ⅲ“什么是圖片液態(tài)化”呢岸裙？大家都知道水無形 能適合很多容器，那么假如我們把圖片當(dāng)做水 是不是就可以實(shí)現(xiàn)圖片自適應(yīng)問題了呢速缆？
在html頁面中的圖片降允，比如文章里插入的圖片我們都可以通過css樣式max-width來進(jìn)行控制圖片的最大寬度，如：
#wrap img{
max-width:100%;
height:auto;
}
如此設(shè)置后ID為wrap內(nèi)的圖片會根據(jù)wrap的寬度改變已達(dá)到等寬擴(kuò)充艺糜，height為auto的設(shè)置是為了保證圖片原始的高寬比例剧董，以至于圖片不會失真。
除了img標(biāo)簽的圖片外我們經(jīng)常會遇到背景圖片破停，比如logo為背景圖片：
#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新屬性翅楼，用于設(shè)置背景圖片的大小，有兩個可選值真慢，第一個值用于指定背景圖的width,第2個值用于指定背景圖的height,如果只指定一個值毅臊，那么另一個值默認(rèn)為auto。
background-size:cover; 等比擴(kuò)展圖片來填滿元素
background-size:contain; 等比縮小圖片來適應(yīng)元素的尺寸
第三：響應(yīng)式布局的實(shí)現(xiàn)原理
首先我們應(yīng)該遵循移動端優(yōu)先晤碘，交互和設(shè)計以移動端為主褂微，pc則作為移動端的擴(kuò)展，一個頁面需要兼容不同終端园爷，那么有兩個關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：響應(yīng)式布局和響應(yīng)式內(nèi)容（圖片宠蚂、多媒體）
第四：響應(yīng)式的優(yōu)化，針對用戶體驗(yàn)的改進(jìn)童社。
1.減輕Javascript庫負(fù)載
對于移動端來說求厕，jQuery表現(xiàn)的太過厚重，而現(xiàn)在針對移動端的狀態(tài)來說扰楼，有jQuery Mobile呀癣、YUI、XUI等可供選擇的框架弦赖。
2.減少HTTP請求次數(shù)
移動端相比較PC端有一個特殊的限制需要考慮到项栏，就是用戶的網(wǎng)絡(luò)流量是有限的。這時候針對這些頁面內(nèi)部的部分操作蹬竖，可以使用Ajax異步請求來完成沼沈，針對短期內(nèi)不會變化的一些數(shù)據(jù)，可以使用服務(wù)器端緩存币厕、前端緩存等機(jī)制來保存這些數(shù)據(jù)列另，這樣可以減少用戶一定的數(shù)據(jù)請求量。
3.Javascript和CSS需要盡量壓縮
把頁面中使用的Javascript和CSS進(jìn)行壓縮之后會有效地減少頁面大小旦装。
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.列表圖片實(shí)現(xiàn)“懶”加載
移動終端設(shè)備因?yàn)槠聊淮笮∮邢薜昀郑瑳]有必要將全屏中的圖片一次性加載完成艰躺，網(wǎng)頁加載的同時，我們可以選擇逐個加載响巢，當(dāng)用戶進(jìn)行滑動頁面的時候描滔，再繼續(xù)加載圖片。
6.圖片顯示的優(yōu)化處理
根據(jù)用戶設(shè)備的分辨率來加載不同分辨率下的不同圖片踪古，這樣既能給不同終端的用戶一個很好的視覺體驗(yàn)，又不會白白浪費(fèi)用戶的網(wǎng)絡(luò)數(shù)據(jù)流量券腔。
