更新時(shí)間:2020-03-30 來源:黑馬程序員 瀏覽量:
各位前端學(xué)習(xí)的小伙伴,相信我們?cè)趯懬岸隧撁娴臅r(shí)候大家都用過百分比布局也就是我們今天所說的流式布局。那么接下來給大家總結(jié)一下流式布局的使用。
一、什么是流式布局?
網(wǎng)頁布局中包括:靜態(tài)布局,流式布局,響應(yīng)式布局和彈性布局幾種情況。
靜態(tài)布局:指的就是網(wǎng)頁中的所有元素都使用px為單位。不管瀏覽器具體的大小是多少,始終按照設(shè)置的值布局來顯示,由于瀏覽器大小不一,這樣的布局很容易在不同設(shè)備中出現(xiàn)滾動(dòng)條等問題。所以這種布局在移動(dòng)開發(fā)不是主流的布局方式。
流式布局:是頁面中元素的寬度按照屏幕分辨率自動(dòng)進(jìn)行適配調(diào)整,也就是我們常說的適配,它可以保證當(dāng)前屏幕分辨率發(fā)生改變的時(shí)候,頁面中的元素大小也可以跟著改變,所以流式布局是移動(dòng)端開發(fā)常用的一種布局。其他布局方式后面再做總結(jié)。推薦了解黑馬程序web前端課程。
二、什么情況下會(huì)用到流式布局?
1. 打開我們移動(dòng)端頁面的時(shí)候,發(fā)現(xiàn)不管在哪種移動(dòng)設(shè)備中,頁面始終都是滿屏顯示如下所示:
圖一:是京東頁面在iphone6,7pluse中的效果:
圖二:是京東頁面在iphone4中的效果:
在移動(dòng)開發(fā)中這種情況下就要用到流式布局實(shí)現(xiàn)了,具體的實(shí)現(xiàn)如下: 首先在網(wǎng)頁的head標(biāo)簽中添加meta標(biāo)簽設(shè)置視口。
然后將頁面中的父元素寬度設(shè)為100%既就可以實(shí)現(xiàn)
2. 移動(dòng)端中導(dǎo)航項(xiàng)要等分父容器,例如攜程移動(dòng)網(wǎng)頁中,導(dǎo)航在iphone4中導(dǎo)航5等分,在iphoneX中也是5等分,如下所示:
圖一:是iphone4中5等分的效果
圖二:是ipnoneX中5等分的效果
移動(dòng)開發(fā)中遇到這種等分的情況下,也需要用到流式布局實(shí)現(xiàn),以5等分為例,具體代碼如下:
可能有的小伙伴還想到了如果分為其他等分呢?我們的做法都是100% 除以對(duì)應(yīng)的份數(shù)就可以了。假如要分為3等份,就100除以3。假如要分為4等份就100除以4即可。
3. 在網(wǎng)頁布局中如果出現(xiàn)左右兩側(cè)固定大小,中間自適應(yīng)(圣杯布局,雙飛翼布局)這種經(jīng)度的布局也需要用到流式布局實(shí)現(xiàn),如下:
具體實(shí)現(xiàn)方式如下: HTML結(jié)構(gòu)中先準(zhǔn)備3個(gè)盒子
然后設(shè)置對(duì)應(yīng)的CSS代碼:
流式布局還有其他的情況,例如左側(cè)固定大小,右側(cè)自適應(yīng)。右側(cè)固定大小左側(cè)自適應(yīng)剩下這兩種情況大家可以參照上面的圣杯布局的方式靈活的實(shí)現(xiàn),這里就不給大家演示了。
三、流式布局有沒有缺點(diǎn)不足的地方么?
流式布局是用于解決類似的設(shè)備不同分辨率之間的兼容,如果屏幕尺度跨度太大,那么在相對(duì)其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義,但是高度和文字大小等大都是用px來固定,所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長(zhǎng),但是高度、文字大小還是和原來一樣(即,這些東西無法變得“流式”),顯示非常不協(xié)調(diào)。所以后面還會(huì)給大家分享通過響應(yīng)式布局和彈性布局來解決這類問題。流式布局就給大家總結(jié)分享到這里。 咱們下一個(gè)章節(jié)講解彈性布局。
猜你喜歡:
web前端學(xué)習(xí)線路圖
css3選擇器用法介紹