佈局簡單總結
一、靜態佈局(Static Layout)
1. 佈局概念
最傳統、原始的Web佈局設計。網頁最外層容器(outer)有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條(overflow:scroll)來實現滾動查閱。
2. 優點
採用的是css2之前的寫法,不存在瀏覽器相容性。佈局簡單。
3. 缺點
但是移動端不可以使用pc端的頁面,兩個頁面的佈局不一致,移動端需要自己另外設計一個佈局並使用不同域名呈現。
4. 實現方法
PC端:
最外層居中,使用固定的寬(高)度,超出部分用滾動條查閱。
例如百度首頁外層body設定了一個min-width:1000px;,當我開啟偵錯程式的時候,底部x軸滾動條
當然,它的佈局比普通的靜態佈局要複雜地多了,比如推薦模組又是一個流式佈局....
移動端
由於靜態佈局不適用於手機端,所以一般都會另設計一個佈局,並使用另一個域名。
例如剛剛百度的PC端我們切換成手機模擬器訪問試試:
確實有點醜是吧。
我們訪問一下百度的手機端頁面:m.baidu.com
舒服！
再看一下最近比較'火'的京東的案例:分別訪問
- jd.com
- m.jd.com
可以發現:
PC端限制了最小的寬度, 低於了則以最小寬度出現滾動條
移動端限制了最大的寬度, 超過了則以最大寬度居中顯示
二、流式佈局(Liquid Layout)
1. 佈局概念
流式佈局也叫百分比佈局
這邊引入一下自適應佈局
分別為不同的螢幕設定佈局格式，當螢幕大小改變時，會出現不同的佈局，意思就是在這個螢幕下這個元素塊在這個地方，但是在那個螢幕下，這個元素塊又會出現在那個地方。只是佈局改變，元素不變。可以看成是不同螢幕下由多個靜態佈局組成的。
而流式佈局的特點是隨著螢幕的改變，頁面的佈局沒有發生大的變化，可以進行適配調整，這個正好與自適應佈局相補。
流式佈局常用的設計模板:
左側固定+右側自適應
左右固定寬度+中間自適應(參考京東手機版)
頁面元素的寬度按照螢幕進行適配調整，主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示 。 你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。
2. 優點
元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，佈局不發生變化
3. 缺點
螢幕尺度跨度過大的情況下，頁面不能正常顯示。
三、彈性佈局(Flex Layout)
1. 佈局概念
彈性佈局是CSS3引入的強大的佈局方式，用來替代以前Web開發人員使 的一些複雜易錯的hacks方法(如float實現流式佈局)。
2. 優點
簡單、方便、快速
3. 缺點
CSS3新特性,瀏覽器相容性非常頭疼。而且手機瀏覽器對flex的支援也不是很理想。
4. 實現方法
flex-flow:||
flex-direction和flex-wrap的簡寫,在兩者選其一。
flex-direction:row（初始值） | row-reverse | column | column-reverse
flex-direction定義了彈性專案在彈性容器中的放置方向，預設是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
row:主軸為水平方向，專案沿主軸從左至右排列
column：主軸為豎直方向，專案沿主軸從上至下排列
row-reverse：主軸水平，專案從右至左排列，與row反向
column-reverse：主軸豎直，專案從下至上排列，與column反向
flex-wrap:nowrap（初始值） | wrap | wrap-reverse
flex-wrap定義是否需要拆行以使得彈性專案能被容器包含。*-reverse代表相反的方向。
nowrap：自動縮小專案，不換行
wrap：換行，且第一行在上方
wrap-reverse：換行，第一行在下面
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
自適應佈局（Adaptive）的特點是分別為不同的螢幕解析度定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨視窗大小的調整發生變化。 你可以把自適應佈局看作是靜態佈局的一個系列。 就是說你看到的頁面，裡面元素的位置會變化而大小不會變化。
四、響應式佈局(Responsive layout)
採用自適應佈局和流式佈局的綜合方式，為不同螢幕解析度範圍建立流式佈局
現在優秀的頁面都追求一套程式碼可以實現三端的瀏覽;
從概念可以看出來,自適應佈局的誕生是為了實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。
通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣.
利用媒體查詢可以檢測到螢幕的尺寸(主要檢測寬度)，並設定不同的CSS樣式，就可以實現響應式的佈局。
大名鼎鼎的bootstrap就是響應式佈局的專家。
官方放出狠話:
Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。
連我們最熱愛的React官方也熱衷於響應式佈局設計:
《React官方網站》
手機端下的React頁面:
五、總結一波
以上四種就是常用的前端佈局方案啦，佈局並不唯一。靈活應用就能構建出優秀的網站