網(wǎng)頁前端常見的布局方案
發(fā)布時間：2021-07-17
一、靜態(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)。
可以發(fā)現(xiàn):
PC端限制了zui小的寬度, 低于了則以zui小寬度出現(xiàn)滾動條
移動端限制了zui大的寬度, 超過了則以zui大寬度居中顯示
二、流式布局(Liquid Layout)
1. 布局概念
流式布局也叫百分比布局
這邊引入一下自適應(yīng)布局:
分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時，會出現(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ì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的支持也不是很理想。
兩者結(jié)合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發(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)式的布局。
布局并不唯一。靈活應(yīng)用就能構(gòu)建出優(yōu)秀的網(wǎng)站...
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)。
可以發(fā)現(xiàn):
PC端限制了zui小的寬度, 低于了則以zui小寬度出現(xiàn)滾動條
移動端限制了zui大的寬度, 超過了則以zui大寬度居中顯示
二、流式布局(Liquid Layout)
1. 布局概念
流式布局也叫百分比布局
這邊引入一下自適應(yīng)布局:
分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時，會出現(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ì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的支持也不是很理想。
兩者結(jié)合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式
自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發(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)式的布局。
布局并不唯一。靈活應(yīng)用就能構(gòu)建出優(yōu)秀的網(wǎng)站...