1.什么是響應(yīng)式開(kāi)發(fā)
就是：一個(gè)網(wǎng)站就夠兼容到多個(gè)終端
2.響應(yīng)式開(kāi)發(fā)的原理
2.1檢測(cè)方法：
1.css3中的Media Query（媒介查詢(xún))
2.js檢測(cè)
通過(guò)查詢(xún)screen的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局
2.2屏幕分類(lèi)
超小屏幕（移動(dòng)設(shè)備） 768px以下
小屏設(shè)備（768px - 992px）
中等屏幕（992px-1200px）
寬度設(shè)備（1200px）
2.3Media Query（媒介查詢(xún))代碼演示
@media screen and (max-width:768px){
/*定義我們這個(gè)區(qū)間內(nèi)的樣式*/
.container{
width: 100%;
background: green;
}
}
/*768-992 需要在小屏幕設(shè)備下 顯示黃色并且寬度750px*/
@media screen and (min-width:768px) and (max-width: 992px){
/*定義我們這個(gè)區(qū)間內(nèi)的樣式*/
.container{
width: 750px;
background: yellow;
}
}
/*992-1200 需要在中等屏幕下 顯示藍(lán)色并且 寬度是 970px*/
@media screen and (min-width:992px) and (max-width: 1200px){
/*定義我們這個(gè)區(qū)間內(nèi)的樣式*/
.container{
width: 970px;
background: blue;
}
}
/*1200 需要在大屏幕下 顯示粉紅色 寬度1170px*/
@media screen and (min-width:1200px){
/*定義我們這個(gè)區(qū)間內(nèi)的樣式*/
.container{
width: 1170px;
background: pink;
}
}
2.4 響應(yīng)式開(kāi)發(fā)-移動(dòng)web開(kāi)發(fā)和響應(yīng)式開(kāi)發(fā)的對(duì)比
compare.png
2.5總結(jié)：
1.移動(dòng)web開(kāi)發(fā)和響應(yīng)式開(kāi)發(fā)都是現(xiàn)在主流的開(kāi)發(fā)模式
2.使用的都是流式布局刃唐，來(lái)適配不同的設(shè)備
3.由于終端設(shè)備的多樣化，新建站的站點(diǎn)會(huì)優(yōu)先試用響應(yīng)式來(lái)開(kāi)發(fā)
