響應(yīng)式布局如何實(shí)現(xiàn)

2020-3-15    前端達(dá)人

css面試題@響應(yīng)式布局如何實(shí)現(xiàn)

1為什么要使用響應(yīng)式布局

響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶有更好

的體驗(yàn)。



2如何實(shí)現(xiàn)

方案一：百分比布局

利用對(duì)屬性設(shè)置百分比來(lái)適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來(lái)設(shè)置的

由于沒(méi)辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。



方案二：使用媒體查詢(xún) (CSS3@media 查詢(xún))

利用媒體查詢(xún)?cè)O(shè)置不同分辨率下的css樣式，來(lái)適配不同屏幕。

媒體查詢(xún)相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫(xiě)一套css樣式。

該布局的話適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來(lái)實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等



方案三.rem 響應(yīng)式布局

rem布局的原理

rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。

如 html的font-size為100px；那么2rem就為200px。

通俗的來(lái)講的話rem就是通過(guò)JavaScript來(lái)獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。

//代碼展示 

css面試題@響應(yīng)式布局如何實(shí)現(xiàn)
1為什么要使用響應(yīng)式布局
響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶有更好
的體驗(yàn)。

2如何實(shí)現(xiàn)
方案一：百分比布局
利用對(duì)屬性設(shè)置百分比來(lái)適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來(lái)設(shè)置的
由于沒(méi)辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。

方案二：使用媒體查詢(xún) (CSS3@media 查詢(xún))
利用媒體查詢(xún)?cè)O(shè)置不同分辨率下的css樣式，來(lái)適配不同屏幕。
媒體查詢(xún)相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫(xiě)一套css樣式。
該布局的話適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來(lái)實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等

方案三.rem 響應(yīng)式布局
rem布局的原理
rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。
如 html的font-size為100px；那么2rem就為200px。
通俗的來(lái)講的話rem就是通過(guò)JavaScript來(lái)獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。
//代碼展示
上述代碼中 7.5為動(dòng)態(tài)的值，根據(jù)設(shè)計(jì)圖的寬度進(jìn)行動(dòng)態(tài)的改變。window.onresize的作用是：當(dāng)頁(yè)面的寬度或高度發(fā)生改變時(shí)，再次進(jìn)行調(diào)用rem函數(shù)。

方案四.vw 響應(yīng)式布局
vm，vh相應(yīng)式布局通俗來(lái)講就是有一點(diǎn)類(lèi)似百分比布局 將頁(yè)面的寬和高分別分為100份 1vm就是為寬度的百分之一，同理1vh及為高度的百分之一。段手機(jī)端用的最多就是這個(gè)方法，能保持不同屏幕下元素顯示效果一致，也不用寫(xiě)多套樣式。

方案五.flex 彈性布局
flex就是利用css3中的彈性盒子向下兼容到IE10
利用flex屬性來(lái)適配不同屏幕， 該方法一般都會(huì)結(jié)合rem布局來(lái)寫(xiě)移動(dòng)端頁(yè)面

————————————————
版權(quán)聲明：本文為CSDN博主「姚先生丶」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/listStyleScript/article/details/104862009

日歷

鏈接

個(gè)人資料

存檔