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