你的位置:首页 > Java教程

[Java教程]关于rem的自定义HTML比例设定


通过设定html根标签的font-size值,控制rem来达到全局布局的自适应的,CSS长度单位全部通过rem设定

必须在head在中引入不可以延迟引入;

new function (){
var _self = this;
_self.width = 750;//设置默认最大宽度
_self.minWidth = 320;//设置最小宽度
_self.min = _self.minWidth/_self.width;
_self.fontSize = 100;//默认字体大小 1rem == 10px
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<_self.min?_self.min:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
if(window.innerWidth>=640){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:56px !important");
}
};
_self.changePage();
window.addEventListener('resize',function(){_self.changePage();},false);
};