響應(yīng)式布局：根據(jù)不同的尺寸適配
viewport
width=device-width 設(shè)置視口的寬度等于設(shè)備的寬度，如果不設(shè)置的話殃姓，默認(rèn)視口的寬度是980px
通俗理解：我們這個操作其實展示當(dāng)前這個頁面一共有多寬（瀏覽器的寬度）
高清屏幕：蘋果手機(jī)是二倍高清屏幕，也就是我們在手機(jī)上看到的那張100100的圖片听系，其實蘋果手機(jī)是按照200200的尺寸進(jìn)行渲染的虑润，
如果真實圖片是100100肥荔，最后呈現(xiàn)出來的就是被拉伸后邊模糊的效果
蘋果手機(jī)上需要的素材圖片都需要比看到的尺寸大一倍才可以弥臼，安卓不用
DPI適配思想:我們在做頁面的時候宴咧，最好每一張圖片都準(zhǔn)備兩套或三套比如：
logo.png 100100
logo@2x.png
logo@3x.png
媒體查詢@media:有兩部分
媒體設(shè)備：all(所有設(shè)備) screen（所有屏幕設(shè)備pc+移動） print(打印機(jī)設(shè)備)...
媒體條件: 指定在什么樣的條件下執(zhí)行對應(yīng)的樣式
@media all and(max-width:319px){
//當(dāng)前的寬度是小于320像素的
}
@media all and (min-width:320px) and (max-width:359px){
//大于等于320小于360
}
響應(yīng)式布局的解決方案：流式布局法
1、容器或者盒子的寬度一般都不寫固定的值径缅，而是使用百分比（相對于視口區(qū)域的百分比）
其余的樣式：字體掺栅、高度、margin纳猪、padding都按照設(shè)計稿上標(biāo)注尺寸的一半來設(shè)置
對于有些屏幕尺寸下我們設(shè)置的固定值看起來不是特別好看的話我們使用@media微調(diào)
在真實項目中柿冲，設(shè)計師給我們的設(shè)計稿一般是 640960 6401136 750*1334
常用的手機(jī)尺寸：5s一下都是320px 6是375px 6plus是414px的寬度
常用的安卓手機(jī)尺寸：320、360兆旬、480、540怎栽、640丽猬、720
特殊情況宿饱，設(shè)計師的設(shè)計稿是640px 我們的素材圖也是640px的，這樣的話在iphone6/iphone6 plus展示的時候脚祟，圖片不夠大谬以，這種情況下我們需要單獨找設(shè)計師要一張更大的圖
@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px){
.box{
background: url("aaaa.jpg");
}
}
@media all and (min-width: 640px){
.box{
background: url("aaaa.jpg");
}
}
開始項目之前的準(zhǔn)備
http://www.reibang.com/p/b7836e8b88ec
http://www.reibang.com/p/be1f77040606
移動端樣式重置http://www.reibang.com/p/92766697b564
