先上代碼
window.onload = function(){
getRem(720,100)
};
window.onresize = function(){
getRem(720,100)
};
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
}
首先我們要明白為什么使用rem,rem有什么作用?
rem: 繼承於html的font-size大小,比如html的font-size等於16px,那么1rem 就等於16px。
這里既然rem可以繼承 html 的font-size的大小，我們可以使用 監聽窗口的大小，來動態改變html 的font-size 來使得頁面兼容於各個移動端手機。
舉例
移動端 屏幕寬除以設計圖寬得到比例，比如屏幕寬等於750px，設計圖寬等於1000px，750除以1000得到0.75px，等於說是設計圖的1px，在瀏覽器上展示的大小為0.75px，這里我們要繼承這個比例大小，采用rem的方法，繼承html的font-size大小的方法去實現，設置html的font-size等於 0.75px（屏幕的0.75px相當於設計圖的1px）,rem會繼承html的font-size大小，所以我們在頁面里面使用的1rem就等於設計圖的1px，后面可以忽略（為了方便我們可以把得到的設計圖和屏幕寬的比例乘以100，等於75，現在1rem等於設計圖的100px,0.01rem等於設計圖的1px。
公式 屏幕寬度 / 設計圖寬度 * 100 = html font-size（0.01rem 等於設計圖的 1px）
有什么不足或錯誤的，請大家指出，第一次發博客，發一下自己的感悟和理解
