一、靜態布局(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頁面:

五、總結一波

以上四種就是常用的前端布局方案啦，布局并不唯一。靈活應用就能構建出優秀的網站

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。