html中js修改字体,rem布局中使用js修改html的fontSize

今天有朋友问我rem布局时，当屏幕宽度不一样的时候如何设置html的font-size的值，所以我就写了一个js供大家参考，如果有更好想法的同学可以回复我哦。

#box{

background: red;

}

#div1{

background: blue;width:10rem;height:4rem;

}

#div2{

background: yellow;width:10rem;height:4rem;

}

(function(doc,win){

var doc = doc.documentElement;

doc.addEventListener('DOMContentLoaded', Resize, false);

// 当DOM加载后执行

win.addEventListener('resize', Resize, false);

// 当屏幕发生变化时执行

function Resize(){

doc.style.fontSize=doc.clientWidth/68.3 +'px'; //屏幕宽度为1366时 html font-size=20px;

//68.3为1366/20计算得出的值，当编写浏览器发生变化时可用编写的浏览器宽度/20得出这个固定值;

}

})(document,window)

最后友情提示：因为每个浏览器的fontSize最小的字体大小不一样，所以尽量使你的html的fontSize在浏览器的合理范围内。