前端常見的佈局方案大全

1、靜態佈局(Static Layout)

1. 佈局概念

最傳統、原始的Web佈局設計。網頁最外層容器(outer)有固定的大小,全部的內容以該容器爲標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。

2. 優勢

採用的是css2以前的寫法,不存在瀏覽器兼容性。佈局簡單。

3. 缺點

可是移動端不可使用pc端的頁面,兩個頁面的佈局不一致,移動端須要本身另外設計一個佈局並使用不一樣域名呈現。

4. 實現方法

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

固然,它的佈局比普通的靜態佈局要複雜地多了,好比推薦模塊又是一個流式佈局....

<b>移動端</b> 因爲靜態佈局不適用於手機端,因此通常都會另設計一個佈局,並使用另外一個域名。 例如剛剛百度的PC端咱們切換成手機模擬器訪問試試:

確實有點醜是吧。

咱們訪問一下百度的手機端頁面:m.baidu.com

舒服！

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

• jd.com
• m.jd.com

能夠發現:
PC端限制了最小的寬度, 低於了則以最小寬度出現滾動條
移動端限制了最大的寬度, 超過了則以最大寬度居中顯示

2、流式佈局(Liquid Layout)

1. 佈局概念

流式佈局也叫百分比佈局

這邊引入一下<b>自適應佈局</b>:
分別爲不一樣的屏幕設置佈局格式，當屏幕大小改變時，會出現不一樣的佈局，意思就是在這個屏幕下這個元素塊在這個地方，可是在那個屏幕下，這個元素塊又會出如今那個地方。只是佈局改變，元素不變。能夠當作是不一樣屏幕下由多個靜態佈局組成的。

而流式佈局的特色是隨着屏幕的改變，頁面的佈局沒有發生大的變化，能夠進行適配調整，這個正好與自適應佈局相補。

<b>流式佈局經常使用的設計模板:</b>
左側固定+右側自適應
左右固定寬度+中間自適應(參考<a href="m.jd.com" target="_blank">京東手機版</a>)

頁面元素的寬度按照屏幕進行適配調整，主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示。

2. 優勢

元素的寬高用百分比作單位，元素寬高按屏幕分辨率調整，佈局不發生變化

3. 缺點

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

3、彈性佈局(Flex Layout)

1. 佈局概念

彈性佈局是CSS3引入的強大的佈局方式，用來替代之前Web開發人員使 的一些複雜易錯的hacks方法(如float實現流式佈局)。

2. 優勢

簡單、方便、快速

3. 缺點

CSS3新特性,瀏覽器兼容性很是頭疼。並且手機瀏覽器對flex的支持也不是很理想。

4. 實現方法

<b>flex-flow:</b> <flex-direction> || <flex-wrap>

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

<b>flex-direction:</b> row（初始值） | row-reverse | column | column-reverse

flex-direction定義了彈性項目在彈性容器中的放置方向，默認是row，即行內方向（通常而言是由左往右，但注意這個和書寫模式有關）。

row:主軸爲水平方向，項目沿主軸從左至右排列

column：主軸爲豎直方向，項目沿主軸從上至下排列

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

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

<b>flex-wrap:</b> nowrap（初始值） | wrap | wrap-reverse

flex-wrap定義是否須要拆行以使得彈性項目能被容器包含。*-reverse表明相反的方向。

nowrap：自動縮小項目，不換行

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

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

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

自適應佈局（Adaptive）的特色是分別爲不一樣的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每一個佈局中，頁面元素不隨窗口大小的調整發生變化。 你能夠把自適應佈局看做是靜態佈局的一個系列。 就是說你看到的頁面，裏面元素的位置會變化而大小不會變化。

4、響應式佈局(Responsive layout)

採用自適應佈局和流式佈局的綜合方式，<font color="red">爲不一樣屏幕分辨率範圍建立<b>流式佈局</b></font>

如今優秀的頁面都追求一套代碼能夠實現三端的瀏覽;
從概念能夠看出來,自適應佈局的誕生是爲了實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。

經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不同展現給用戶的網頁內容也不同.

利用<b>媒體查詢</b>能夠檢測到屏幕的尺寸(主要檢測寬度)，並設置不一樣的CSS樣式，就能夠實現響應式的佈局。

大名鼎鼎的bootstrap就是響應式佈局的專家。

官方放出狠話:
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。

連咱們最熱愛的React官方也熱衷於響應式佈局設計: <a href="https://www.reactjscn.com/" target="_blank">《React官方網站》</a>

手機端下的React頁面:

5、總結一波

以上四種就是經常使用的前端佈局方案啦，佈局並不惟一。靈活應用就能構建出優秀的網站