點(diǎn)擊上方藍(lán)字關(guān)注我哦前端五大常見布局

前端5種常見布局方式

作為前端開發(fā)工程師，布局方式有多種，對于不同的場景可以使用不同的布局方式，但是很多剛參加工作的同學(xué)對于這些不是很了解，那么我們就先來簡單的來了解一下，那些前端開發(fā)必須了解的布局。之后我還會再詳細(xì)地說說這五大布局。

1.靜態(tài)布局：

靜態(tài)布局：給頁面元素設(shè)置固定的寬度和高度，單位用px，當(dāng)窗口縮小，會出現(xiàn)滾動條，拉動滾動條顯示被遮擋內(nèi)容。針對不同分辨率的手機(jī)端，分別寫不同的樣式文件。

2.彈性布局：

css3引入的，flex布局；優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個(gè)布局效果，然而缺點(diǎn)是：瀏覽器兼容性比較差，只能兼容到ie9及以上；

3.自適應(yīng)布局：

分別為不同的屏幕分辨率定義布局，在每個(gè)布局中，頁面元素不隨窗口大小的調(diào)整而發(fā)生變化，當(dāng)窗口大小到達(dá)一定分辨率時(shí)變化一次。創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對應(yīng)一個(gè)屏幕分辨率范圍，使用@media媒體查詢技術(shù)。

4.流式布局：

元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化。屏幕尺度跨度過大的情況下，頁面不能正常顯示。

5.響應(yīng)式布局：

使用meta標(biāo)簽設(shè)置，頁面元素寬度隨窗口調(diào)整自動適配。采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局。

注意的是：在我們學(xué)習(xí)或者是做項(xiàng)目時(shí)要怎么選擇布局方式。

1.如果只做pc端，那么靜態(tài)布局是最好的選擇；

2.如果做移動端，且設(shè)計(jì)對高度和元素間距要求不高，那么彈性布局(rem+js)是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定；

3.如果pc，移動要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇，這個(gè)目前是比較流行的布局方式。

重點(diǎn)來啦！！！靜態(tài)布局靜態(tài)布局

一、靜態(tài)布局

1. 布局概念

最傳統(tǒng)、原始的Web布局設(shè)計(jì)。網(wǎng)頁最外層容器有固定的大小,所有的內(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)方法

(1)PC端:

最外層居中,使用固定的寬(高)度,超出部分用滾動條查閱。

(2)移動端

由于靜態(tài)布局不適用于手機(jī)端,所以一般都會另設(shè)計(jì)一個(gè)布局,并使用另一個(gè)域名。

我們可以通過查看一個(gè)案例去看看效果，例如：看一下最近比較'火'的京東的案例:分別訪問

jd.com

m.jd.com

彈性布局彈性布局

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)方法

(1)flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性。屬性用于設(shè)置或檢索彈性盒模型對象的子元素排列方式。

(2)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反向

(3)flex-wrap: nowrap(初始值) | wrap | wrap-reverse

flex-wrap定義是否需要拆行，使得彈性項(xiàng)目能被容器包含。

nowrap：自動縮小項(xiàng)目，不換行

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

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

(4)justify-content：

flex-start|flex-end|center|space-between|space-around|initial|inherit;

詳細(xì)說明：

flex-start：默認(rèn)值。項(xiàng)目位于容器的開頭。

flex-end：項(xiàng)目位于容器的結(jié)尾。

center：項(xiàng)目位于容器的中心。

space-between：項(xiàng)目位于各行之間留有空白的容器內(nèi)。

space-around：項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。

initial：設(shè)置該屬性為它的默認(rèn)值。

inherit：從父元素繼承該屬性。

流式布局流式布局

流式布局也叫百分比布局：

這邊引入一下自適應(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ī)版)

頁面元素的寬度按照屏幕進(jìn)行適配調(diào)整，主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示 。你看到的頁面，元素的大小會變化而位置不會變化——這就導(dǎo)致如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示。

2. 優(yōu)點(diǎn)

元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化

3. 缺點(diǎn)

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

自適應(yīng)布局Merry christmas

1.可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整網(wǎng)頁布局。

網(wǎng)頁頭部引入：

網(wǎng)頁寬度等于屏幕寬度(width=device-width，原始縮放比例為1.0(initial-scale=1)。

所有主流瀏覽器都支持(IE9)，對于IE6~8，引入css3-mediaqueries.js

2.注意事項(xiàng)：

①不適應(yīng)絕對寬度/固定寬度。即css不能指定具體像素寬度，只能指定百分比寬度或者auto。

width: xxx %;或者width: auto;

②相對大小字體。字體不能使用絕對大小(px)，而是使用相對大小(em)。如：指定字體大小是頁面默認(rèn)大小的100%(瀏覽器的默認(rèn)像素是16px)

?例子：

h1 {font-size: 1.5em; }

.small {font-size: 0.875em;}

img{max-width: 100%;width: 100%;}

指定h1的大小是默認(rèn)大小的1.5倍，即24像素(16乘1.5=24)，small的大小是默認(rèn)大小的0.875倍，即14px(16乘0.875=14)

響應(yīng)式布局Merry christmas

！！！隆重介紹：它是采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局，現(xiàn)在優(yōu)秀的頁面都追求一套代碼可以實(shí)現(xiàn)三端的瀏覽;

(1)從概念可以看出來,自適應(yīng)布局的誕生是為了實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。

(2)通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.

利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。

大名鼎鼎的bootstrap就是響應(yīng)式布局的專家，官方放出狠話:

Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。

平安夜祝您平安喜樂

更多前端干貨? ?

請掃碼關(guān)注我哦? ?

祝大家“平安喜樂”??

總結(jié)

以上是生活随笔為你收集整理的anguler 画面布局适应屏幕大小_前端开发常见的五大布局模式，绝对不要错过这篇分享！...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。