流式布局介紹：流式布局的優(yōu)勢(shì)和不足[web前端培訓(xùn)]

各位前端學(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ì)變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。所以后面還會(huì)給大家分享通過響應(yīng)式布局和彈性布局來解決這類問題。流式布局就給大家總結(jié)分享到這里。 咱們下一個(gè)章節(jié)講解彈性布局。

猜你喜歡：
靜態(tài)網(wǎng)站與動(dòng)態(tài)網(wǎng)站的區(qū)別是什么？