移动端页面宽度的获取及html字体设置

第一种方法

(function(){
 var html=document.documentElement;
 var hWidth=html.getBoundingClientRect().width;//获取到页面的宽度
 html.style.fontSize=hWidth/7.5+'px';//将页面平分为7.5分份
 console.log(html.style.fontSize)
})()

第二种方法（华为手机适配有问题）

let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
let htmlDom=document.getElementsByTagName('html')[0];//获取html的dom
console.log(htmlWidth)
htmlDom.style.fontSize=htmlWidth/7.5+'px';//将页面平分为7.5份
window.addEventListener('resize',(e)=>{
    htmlDom.style.fontSize=htmlWidth/7.5+'px';
})

在以750px的设计稿中，相当于1rem=100px为基础，就可以按照实际设计稿的尺寸除以100得到代码中对应的rem。例如设计稿中元素的font-size:30px，在写代码的时候我们就直接换成font-size:.3rem

第三种方法

(function(){
  $('html').css('font-size', ($('body').width() /750 * 62.5 + "%"));
})()

页面设计稿750px，因移动端浏览器默认字号大小为16px;16*62.5%刚好为10px；页面中font-size:12px;则设置font-size:1.2rem;
rem：相对根节点html的font-size设置来作为当前元素1rem所代表的像素值，与em的区别就是rem的基本度量单位与父节点无关，只与根节点font-size的设置有关，如设置html{font-size:10px;}后当前dom所有节点的1rem都表示10px;
第四种

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth||window.screen.width;