//方法一
function setPxRem(){
var cssEl = document.createElement('style');
document.documentElement.firstElementChild.appendChild(cssEl);
var dpr = 1;
//把viewport分成10份的rem,html标签的font-size设置为1rem的大小;
var pxPerRem = document.documentElement.clientWidth * dpr / 10;
cssEl.innerHTML = 'html{font-size:' + pxPerRem + 'px!important;}';
}
setPxRem()
把屏幕平均分成十份,按照iPhone6的尺寸,让设计图的px / 75 即为所适配的尺寸 rem
//方法二
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小以iPhone6为基准设置的根字体是15px
htmlDom.style.fontSize= htmlWidth/25 + 'px';
//方法三
// 屏幕宽
new function (){
var _self = this;
_self.width = 750;//设置默认最大宽度
_self.fontSize = 100;//默认字体大小
_self.widthProportion = function(){var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0?0:p;};
_self.changePage = function(){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize',function(){_self.changePage();},false);
FONTSIZE = _self.widthProportion()*_self.fontSize
// alert(_self.widthProportion())
// alert(_self.widthProportion()*_self.fontSize)
// alert(document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)
}
默认的宽度是iphone 750尺寸下 1rem=100px(例如设计图宽为50px则为.5rem)