一、靜態(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端的頁面,兩個(gè)頁面的布局不一致,移動端需要自己另外設(shè)計(jì)一個(gè)布局并使用不同域名呈現(xiàn)。
4. 實(shí)現(xiàn)方法
PC端:
最外層居中,使用固定的寬(高)度,超出部分用滾動條查閱。
例如百度首頁外層body設(shè)置了一個(gè)min-width:1000px;,當(dāng)我打開調(diào)試器的時(shí)候,底部x軸滾動條就出現(xiàn)了。
當(dāng)然,它的布局比普通的靜態(tài)布局要復(fù)雜地多了,比如推薦模塊又是一個(gè)流式布局....
移動端
由于靜態(tài)布局不適用于手機(jī)端,所以一般都會另設(shè)計(jì)一個(gè)布局,并使用另一個(gè)域名。
例如剛剛百度的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)不同的布局，意思就是在這個(gè)屏幕下這個(gè)元素塊在這個(gè)地方，但是在那個(gè)屏幕下，這個(gè)元素塊又會出現(xiàn)在那個(gè)地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。
而流式布局的特點(diǎn)是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)布局相補(bǔ)。
流式布局常用的設(shè)計(jì)模板:
左側(cè)固定+右側(cè)自適應(yīng)
左右固定寬度+中間自適應(yīng)
頁面元素的寬度按照屏幕進(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ù)雜易錯(cuò)的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)方向（一般而言是由左往右，但注意這個(gè)和書寫模式有關(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兩個(gè)方向上的顯示方式
自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時(shí)頁面元素發(fā)生改變，但在每個(gè)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。 你可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。 就是說你看到的頁面，里面元素的位置會變化而大小不會變化。
四、響應(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)式的布局。
手機(jī)端下的React頁面:
五、總結(jié)一波
以上四種就是洛壹網(wǎng)絡(luò)總結(jié)的常用的前端布局方案啦，布局并不唯一。靈活應(yīng)用就能構(gòu)建出優(yōu)秀的網(wǎng)站
更多網(wǎng)站開發(fā)技術(shù)問題請?jiān)L問網(wǎng)站http://jmtianhui.com/news.html