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