各位前端學習的小夥伴,相信我們在寫前端頁面的時候大家都用過百分比布局也就是我們今天所說的流式布局.那麼接下來給大家總結一下流式布局的使用.
一:什麼是流式布局?
網頁布局中包括:靜態布局，流式布局，響應式布局和彈性布局幾種情況.靜態布局:指的就是網頁中的所有元素都使用px為單位.不管瀏覽器具體的大小是多少，始終按照設置的值布局來顯示，由於瀏覽器大小不一，這樣的布局很容易在不同設備中出現滾動條等問題.所以這種布局在移動開發不是主流的布局方式. 流式布局:是頁面中元素的寬度按照屏幕解析度自動進行適配調整，也就是我們常說的適配，它可以保證當前屏幕解析度發生改變的時候，頁面中的元素大小也可以跟著改變，所以流式布局是移動端開發常用的一種布局.其他布局方式後面再做總結.
二:什麼情況下會用到流式布局?
打開我們移動端頁面的時候，發現不管在哪種行動裝置中，頁面始終都是滿屏顯示如下所示:圖一:是京東頁面在iphone6,7pluse中的效果:
圖二:是京東頁面在iphone4中的效果:
在移動開發中這種情況下就要用到流式布局實現了，具體的實現如下: 首先在網頁的head標籤中添加meta標籤設置視口
然後將頁面中的父元素寬度設為100%既就可以實現
移動端中導航項要等分父容器，例如攜程移動網頁中，導航在iphone4中導航5等分，在iphoneX中也是5等分，如下所示:
圖一:是iphone4中5等分的效果
圖二:是ipnoneX中5等分的效果
移動開發中遇到這種等分的情況下，也需要用到流式布局實現，以5等分為例，具體代碼如下:
可能有的小夥伴還想到了如果分為其他等分呢?我們的做法都是100% 除以對應的份數就可以了.假如要分為3等份，就100除以3.假如要分為4等份就100除以4即可.
在網頁布局中如果出現左右兩側固定大小，中間自適應(聖杯布局，雙飛翼布局)這種經度的布局也需要用到流式布局實現，如下:
具體實現方式如下: HTML結構中先準備3個盒子
然後設置對應的CSS代碼:
流式布局還有其他的情況，例如左側固定大小，右側自適應.右側固定大小左側自適應剩下這兩種情況大家可以參照上面的聖杯布局的方式靈活的實現，這裡就不給大家演示了.
三:流式布局有沒有缺點不足的地方麼?
流式布局是用於解決類似的設備不同解析度之間的兼容，如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。所以後面還會給大家分享通過響應式布局和彈性布局來解決這類問題.流式布局就給大家總結分享到這裡. 咱們下一個章節講解彈性布局。