1,流式布局
使用非固定像素來定義網(wǎng)頁內(nèi)容,也就是百分比布局,通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)行伸縮,不愛固定像素的限制,內(nèi)容向兩側(cè)填充。這樣的布局方式,就是移動(dòng)web開發(fā)使用的常用布局方式。這樣的布局可以適配移動(dòng)端不同的分辨設(shè)備。
2,響應(yīng)式開發(fā)
那么Ethan Marcotte在2010年5月份提出的一個(gè)概念,簡而言之,就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端。越來越多的設(shè)計(jì)師也采用了這種設(shè)計(jì)。
CSS3中Media Query(媒介查詢),通過查詢screen的寬度來指定某個(gè)寬度區(qū)間的網(wǎng)頁布局。
超小屏幕(移動(dòng)設(shè)備) 768px以下
小屏設(shè)備 768px-992px
中等屏幕 992px-1200px
寬屏設(shè)備 1200以上
由于響應(yīng)式開發(fā)顯得繁瑣些,一般使用第三方響應(yīng)式框架來完成,比如bootstrap來完成一部分工作,當(dāng)然也可以自己寫響應(yīng)式。