一、靜態(tài)布局(Static Layout)

1. 布局概念

最傳統(tǒng)、原始的Web布局設(shè)計(jì)。網(wǎng)頁最外層容器(outer)有固定的大小,所有的內(nèi)容以該容器為標(biāo)準(zhǔn),超出寬高的部分用滾動條(overflow:scroll)來實(shí)現(xiàn)滾動查閱。

2. 優(yōu)點(diǎn)

采用的是css2之前的寫法,不存在瀏覽器兼容性。布局簡單。

3. 缺點(diǎn)

但是移動端不可以使用pc端的頁面,兩個頁面的布局不一致,移動端需要自己另外設(shè)計(jì)一個布局并使用不同域名呈現(xiàn)。

4. 實(shí)現(xiàn)方法

PC端:最外層居中,使用固定的寬(高)度,超出部分用滾動條查閱。例如百度首頁外層body設(shè)置了一個min-width:1000px;,當(dāng)我打開調(diào)試器的時(shí)候,底部x軸滾動條就出現(xiàn)了。

當(dāng)然,它的布局比普通的靜態(tài)布局要復(fù)雜地多了,比如推薦模塊又是一個流式布局....

移動端由于靜態(tài)布局不適用于手機(jī)端,所以一般都會另設(shè)計(jì)一個布局,并使用另一個域名。例如剛剛百度的PC端我們切換成手機(jī)模擬器訪問試試:

確實(shí)有點(diǎn)丑是吧。

我們訪問一下百度的手機(jī)端頁面:m.baidu.com

舒服！

再看一下最近比較'火'的京東的案例:分別訪問

• jd.com
• m.jd.com

可以發(fā)現(xiàn):PC端限制了最小的寬度, 低于了則以最小寬度出現(xiàn)滾動條移動端限制了最大的寬度, 超過了則以最大寬度居中顯示

二、流式布局(Liquid Layout)

1. 布局概念

流式布局也叫百分比布局

這邊引入一下自適應(yīng)布局:分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時(shí)，會出現(xiàn)不同的布局，意思就是在這個屏幕下這個元素塊在這個地方，但是在那個屏幕下，這個元素塊又會出現(xiàn)在那個地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個靜態(tài)布局組成的。

而流式布局的特點(diǎn)是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個正好與自適應(yīng)布局相補(bǔ)。

流式布局常用的設(shè)計(jì)模板:左側(cè)固定+右側(cè)自適應(yīng)左右固定寬度+中間自適應(yīng)(參考京東手機(jī)版)

頁面元素的寬度按照屏幕進(jìn)行適配調(diào)整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就導(dǎo)致如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示。

2. 優(yōu)點(diǎn)

元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化

3. 缺點(diǎn)

屏幕尺度跨度過大的情況下，頁面不能正常顯示。

三、彈性布局(Flex Layout)

1. 布局概念

彈性布局是CSS3引入的強(qiáng)大的布局方式，用來替代以前Web開發(fā)人員使 的一些復(fù)雜易錯的hacks方法(如float實(shí)現(xiàn)流式布局)。

2. 優(yōu)點(diǎn)

簡單、方便、快速

3. 缺點(diǎn)

CSS3新特性,瀏覽器兼容性非常頭疼。而且手機(jī)瀏覽器對flex的支持也不是很理想。

4. 實(shí)現(xiàn)方法

flex-flow: ||

flex-direction和flex-wrap的簡寫,在兩者選其一。

flex-direction: row(初始值) | row-reverse | column | column-reverse

flex-direction定義了彈性項(xiàng)目在彈性容器中的放置方向，默認(rèn)是row，即行內(nèi)方向(一般而言是由左往右，但注意這個和書寫模式有關(guān))。

row:主軸為水平方向，項(xiàng)目沿主軸從左至右排列

column：主軸為豎直方向，項(xiàng)目沿主軸從上至下排列

row-reverse：主軸水平，項(xiàng)目從右至左排列，與row反向

column-reverse：主軸豎直，項(xiàng)目從下至上排列，與column反向

flex-wrap: nowrap(初始值) | wrap | wrap-reverse

flex-wrap定義是否需要拆行以使得彈性項(xiàng)目能被容器包含。*-reverse代表相反的方向。

nowrap：自動縮小項(xiàng)目，不換行

wrap：換行，且第一行在上方

wrap-reverse：換行，第一行在下面

兩者結(jié)合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式

自適應(yīng)布局(Adaptive)的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時(shí)頁面元素發(fā)生改變，但在每個布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。 你可以把自適應(yīng)布局看作是靜態(tài)布局的一個系列。 就是說你看到的頁面，里面元素的位置會變化而大小不會變化。

四、響應(yīng)式布局(Responsive layout)

采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局

現(xiàn)在優(yōu)秀的頁面都追求一套代碼可以實(shí)現(xiàn)三端的瀏覽;從概念可以看出來,自適應(yīng)布局的誕生是為了實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。

通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.

利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。

大名鼎鼎的bootstrap就是響應(yīng)式布局的專家。

官方放出狠話:Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。

連我們最熱愛的React官方也熱衷于響應(yīng)式布局設(shè)計(jì):《React官方網(wǎng)站》

手機(jī)端下的React頁面:

五、總結(jié)一波

以上四種就是常用的前端布局方案啦，布局并不唯一。靈活應(yīng)用就能構(gòu)建出優(yōu)秀的網(wǎng)站

總結(jié)

以上是生活随笔為你收集整理的从上往下 流式布局_教大家怎么写前端布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。