一、理解層面：
1捧搞、概念：響應(yīng)式就是頁(yè)面會(huì)根據(jù)不同屏幕分辨率的寬度抵卫，而改變自身的外貌。
2胎撇、實(shí)現(xiàn)過(guò)程：先有設(shè)計(jì)稿介粘，一般是PC版、PAD版和移動(dòng)端版本的一套設(shè)計(jì)稿晚树，然后前端開發(fā)師才可以進(jìn)行單位的換算姻采，使用一套代碼，多半是同樣的標(biāo)簽組合爵憎，實(shí)現(xiàn)三版頁(yè)面慨亲。
二婚瓜、響應(yīng)式實(shí)現(xiàn)方式
（1）最基本的重點(diǎn)：只要width不寫為固定值，這個(gè)頁(yè)面就可以認(rèn)為是響應(yīng)式的刑棵。實(shí)現(xiàn)效果就是隨著頁(yè)面大小縮放巴刻，元素位置也會(huì)有變化；
（2）設(shè)置最大寬度蛉签，當(dāng)頁(yè)面寬度小于最大寬度值時(shí)胡陪，頁(yè)面寬度就會(huì)變成100%。最大不會(huì)操作最大寬度碍舍，小于就認(rèn)定為100%
（３）當(dāng)達(dá)到某一頁(yè)面寬度值的時(shí)候柠座，頁(yè)面元素會(huì)自動(dòng)分行，例如原來(lái)是3塊一行乒验，現(xiàn)在隨之變成2塊一行：使用媒體查詢
先寫默認(rèn)樣式愚隧，然后再寫媒體查詢，當(dāng)達(dá)到某一條件時(shí)锻全，對(duì)應(yīng)就變化樣式設(shè)置：
<style>
.cards{
list-style:none;
margin:0 auto;
padding:0;
overflow:hidden;
max-width:960px;
}
.cards li{
width:33.333%;
float:left;
box-sizing:border-box;
padding:10px;
}
@media (max-width:640px){
.cards li{
width:50%
}
}
@media (max-width:320px){
.cards li{
width:100%;
}
}
</style>
當(dāng)頁(yè)面寬度大于640px時(shí)，li的寬度就是33.33%录煤，一行三列
當(dāng)頁(yè)面寬度小于等于640px時(shí)鳄厌，li的寬度就會(huì)是50%，一行兩列妈踊；
當(dāng)頁(yè)面寬度小于等于320px時(shí)了嚎，li的寬度就會(huì)是100%，一行一列廊营；
（4）實(shí)習(xí)標(biāo)題文字類的換行：
<div class="banner">
<h1 class="one-line">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</h1>
<h1 class="two-line">標(biāo)題標(biāo)題<br/>標(biāo)題標(biāo)題</h1>
</div>
.banner .two-line{
display:none;
}
@media (max-width:320px){
.banner .one-line{
display:none;
}
.banner .two-line{
display:block;
}
}
依次例推歪泳，就是將兩種頁(yè)面寬度下的樣式都實(shí)現(xiàn)（借助換行標(biāo)簽
等），然后通過(guò)媒體查詢露筒，控制兩種樣式的display樣式的block/none的切換呐伞。
總結(jié)：
1、不要將width寫為固定值px慎式，而是轉(zhuǎn)而使用百分比的方式伶氢；
2、使用max-width和min-width等這些最大最小高度瘪吏、寬度的屬性設(shè)置癣防，需要時(shí)配合margin:0 auto；
3掌眠、使用媒體查詢
4蕾盯、寫多個(gè)不同頁(yè)面寬度下的預(yù)期樣式，然后使用媒體查詢進(jìn)行切換蓝丙。
