Web前端培訓(xùn)：移動端頁面布局

　　在移動Web開發(fā)中，可以通過流式布局、彈性盒布局和Rem適配布局來制作移動端頁面。此外，還可以將上述三大布局與媒體查詢結(jié)合起來創(chuàng)建響應(yīng)式頁面，實現(xiàn)一個頁面同時兼容PC端和移動端。為了提高CSS樣式代碼的編寫效率，可以使用Sass或Less編寫復(fù)用性更優(yōu)的CSS代碼。讀者掌握了這些技術(shù)后，就能夠編寫響應(yīng)式頁面了，但是為了提高開發(fā)效率，在開發(fā)中還會引入Bootstrap框架，利用它來快速構(gòu)建響應(yīng)式頁面。

　　移動端頁面的常用布局方法包括流式布局、彈性盒布局和Rem適配布局。下面針對這三大布局進行簡要介紹。

　　1.流式布局

　　流失布局也稱為百分比自適應(yīng)布局，它是一種等比例縮放的布局方式。在CSS代碼中需要使用百分比來設(shè)置盒子的寬度和高度，例如，把盒子的寬度設(shè)置成百分比，網(wǎng)頁就會根據(jù)瀏覽器的寬度和屏幕的大小來自動調(diào)整顯示效果。流式布局方式是移動Web開發(fā)中比較常見的布局方式。

　　2.彈性盒布局

　　彈性盒布局是CSS3中的一種新布局模式，可以輕松地創(chuàng)建響應(yīng)式網(wǎng)站布局。彈性盒布局為盒子模型增加了靈活性，可以讓人們告別浮動(float)，完美地實現(xiàn)垂直居中。該布局模式目前得到幾乎所有主流瀏覽器的支持。

　　3.Rem適配布局

　　Rem適配布局一般采用Less+Rem+媒體查詢來實現(xiàn)響應(yīng)式布局設(shè)計，使用媒體查詢可以根據(jù)不同的設(shè)備按比例設(shè)置頁面的字體大小，然后在頁面中使用rem單位，可以通過修改HTML里面的文字大小來改變頁面中元素的大小，從而進行整體控制。

　　小提示：上述幾種布局方式并不是獨立存在的，在實際開發(fā)過程中往往相互結(jié)合使用，多種方式融合在一起實現(xiàn)移動端的屏幕適配的方法，稱之為混合布局，目前很多公司都采取這種布局方式。