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

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

一、什么是流式布局?

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

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

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

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

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

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

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

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

然后將頁面中的父元素寬度設為100%既就可以實現

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

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

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

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

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

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

具體實現方式如下: HTML結構中先準備3個盒子

然后設置對應的CSS代碼:

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

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

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

猜你喜歡：
web前端學習線路圖
css3選擇器用法介紹