什么是流式布局?什么情況下用？[web前端培訓(xùn)]

各位前端學(xué)習(xí)的小伙伴，相信我們在寫前端頁面的時候大家都用過百分比布局也就是我們今天所說的流式布局。那么接下來給大家總結(jié)一下流式布局的使用。

一、什么是流式布局?

網(wǎng)頁布局中包括:靜態(tài)布局，流式布局，響應(yīng)式布局和彈性布局幾種情況。

靜態(tài)布局：指的就是網(wǎng)頁中的所有元素都使用px為單位。不管瀏覽器具體的大小是多少，始終按照設(shè)置的值布局來顯示，由于瀏覽器大小不一，這樣的布局很容易在不同設(shè)備中出現(xiàn)滾動條等問題。所以這種布局在移動開發(fā)不是主流的布局方式。

流式布局：是頁面中元素的寬度按照屏幕分辨率自動進(jìn)行適配調(diào)整，也就是我們常說的適配，它可以保證當(dāng)前屏幕分辨率發(fā)生改變的時候，頁面中的元素大小也可以跟著改變，所以流式布局是移動端開發(fā)常用的一種布局。其他布局方式后面再做總結(jié)。推薦了解黑馬程序web前端課程。

二、什么情況下會用到流式布局?

1. 打開我們移動端頁面的時候，發(fā)現(xiàn)不管在哪種移動設(shè)備中，頁面始終都是滿屏顯示如下所示:

圖一：是京東頁面在iphone6，7pluse中的效果:

圖二：是京東頁面在iphone4中的效果:

在移動開發(fā)中這種情況下就要用到流式布局實現(xiàn)了，具體的實現(xiàn)如下: 首先在網(wǎng)頁的head標(biāo)簽中添加meta標(biāo)簽設(shè)置視口。

然后將頁面中的父元素寬度設(shè)為100%既就可以實現(xiàn)

2. 移動端中導(dǎo)航項要等分父容器，例如攜程移動網(wǎng)頁中，導(dǎo)航在iphone4中導(dǎo)航5等分，在iphoneX中也是5等分，如下所示:

圖一：是iphone4中5等分的效果

圖二：是ipnoneX中5等分的效果

移動開發(fā)中遇到這種等分的情況下，也需要用到流式布局實現(xiàn)，以5等分為例，具體代碼如下:

可能有的小伙伴還想到了如果分為其他等分呢?我們的做法都是100% 除以對應(yīng)的份數(shù)就可以了。假如要分為3等份，就100除以3。假如要分為4等份就100除以4即可。

3. 在網(wǎng)頁布局中如果出現(xiàn)左右兩側(cè)固定大小，中間自適應(yīng)(圣杯布局，雙飛翼布局)這種經(jīng)度的布局也需要用到流式布局實現(xiàn)，如下:

具體實現(xiàn)方式如下: HTML結(jié)構(gòu)中先準(zhǔn)備3個盒子

然后設(shè)置對應(yīng)的CSS代碼:

流式布局還有其他的情況，例如左側(cè)固定大小，右側(cè)自適應(yīng)。右側(cè)固定大小左側(cè)自適應(yīng)剩下這兩種情況大家可以參照上面的圣杯布局的方式靈活的實現(xiàn)，這里就不給大家演示了。

三、流式布局有沒有缺點不足的地方么?

流式布局是用于解決類似的設(shè)備不同分辨率之間的兼容，如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。所以后面還會給大家分享通過響應(yīng)式布局和彈性布局來解決這類問題。流式布局就給大家總結(jié)分享到這里。 咱們下一個章節(jié)講解彈性布局。

猜你喜歡：
web前端學(xué)習(xí)線路圖
css3選擇器用法介紹