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)
方案一：百分比布局
利用對屬性設(shè)置百分比來適配不同屏幕，注意這里的百分比是相對于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來設(shè)置的
由于沒辦法對font-size進(jìn)行百分比設(shè)置，所以用的最多就是對圖片和大塊布局進(jìn)行百分比設(shè)置。
方案二：使用媒體查詢 (CSS3@media 查詢)
利用媒體查詢設(shè)置不同分辨率下的css樣式，來適配不同屏幕。
媒體查詢相對于百分比布局，可以對布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫一套css樣式。
該布局的話適用于簡單的網(wǎng)頁，可以使移動端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來實(shí)現(xiàn)響應(yīng)的 但是相對于復(fù)雜的網(wǎng)頁就不適合了（如：淘寶，京東）等等
方案三.rem 響應(yīng)式布局
rem布局的原理
rem：相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)。
如 html的font-size為100px；那么2rem就為200px。
通俗的來講的話rem就是通過JavaScript來獲取頁面的寬度，從而動態(tài)的計(jì)算rem。這樣就會使不同分辨率下展現(xiàn)出相同的效果。
//代碼展示
css面試題@響應(yīng)式布局如何實(shí)現(xiàn) 1為什么要使用響應(yīng)式布局 響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶有更好 的體驗(yàn)。 2如何實(shí)現(xiàn) 方案一：百分比布局 利用對屬性設(shè)置百分比來適配不同屏幕，注意這里的百分比是相對于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來設(shè)置的 由于沒辦法對font-size進(jìn)行百分比設(shè)置，所以用的最多就是對圖片和大塊布局進(jìn)行百分比設(shè)置。 方案二：使用媒體查詢 (CSS3@media 查詢) 利用媒體查詢設(shè)置不同分辨率下的css樣式，來適配不同屏幕。 媒體查詢相對于百分比布局，可以對布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫一套css樣式。 該布局的話適用于簡單的網(wǎng)頁，可以使移動端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來實(shí)現(xiàn)響應(yīng)的 但是相對于復(fù)雜的網(wǎng)頁就不適合了（如：淘寶，京東）等等 方案三.rem 響應(yīng)式布局 rem布局的原理 rem：相對于根元素(即html元素)font-size計(jì)算值的倍數(shù)。 如 html的font-size為100px；那么2rem就為200px。 通俗的來講的話rem就是通過JavaScript來獲取頁面的寬度，從而動態(tài)的計(jì)算rem。這樣就會使不同分辨率下展現(xiàn)出相同的效果。 //代碼展示上述代碼中 7.5為動態(tài)的值，根據(jù)設(shè)計(jì)圖的寬度進(jìn)行動態(tài)的改變。window.onresize的作用是：當(dāng)頁面的寬度或高度發(fā)生改變時(shí)，再次進(jìn)行調(diào)用rem函數(shù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn