教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

Web前端培訓(xùn):移動(dòng)端頁(yè)面布局

更新時(shí)間:2022年08月09日14時(shí)51分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

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

  移動(dòng)端頁(yè)面的常用布局方法包括流式布局、彈性盒布局和Rem適配布局。下面針對(duì)這三大布局進(jìn)行簡(jiǎn)要介紹。

  1.流式布局

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

  2.彈性盒布局

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

  3.Rem適配布局

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

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

0 分享到:
和我們?cè)诰€交談!