全國咨詢/投訴熱線:400-618-4000

流式布局介紹:流式布局的優勢和不足[web前端培訓]

更新時間:2020年03月30日16時04分 來源:傳智播客 瀏覽次數:

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

一、什么是式局?

網頁布局中包括:靜態布局,流式布局,響應式布局和彈性布局幾種情況。

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

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

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

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

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

瀑布流01


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

瀑布流02.jpg

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

瀑布流03.jpg


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

瀑布流04.jpg


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

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

瀑布流05.jpg


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

瀑布流06.jpg


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

瀑布流07.jpg


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

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

瀑布流08.jpg


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

瀑布流09.jpg


然后設置對應的CSS代碼:

瀑布流10.jpg

           

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

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

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

猜你喜歡:
靜態網站與動態網站的區別是什么?

人妻系列无码专区_漂亮人妻被中出中文字幕_人妻中文制服巨乳中文