rem移动端完全自适应适配的2种方法

方法一：
　　将px替换成rem，动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一致的效果体验。举例说明，在320px宽度的屏幕下font-size的默认值是16px，得到的换算rem的倍数为320/16=20;1rem等于16px；

//得到手机屏幕的宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';

方法二：
　　固定换算倍数100设置rem，实现的效果是在PC端浏览器里不用点击toggle device toolbar(切换设备工具栏)也可以和移动端屏幕基本一致的效果体验，设置的默认宽度为750px（可以根据你的图纸修改默认宽度），在默认屏幕宽度下1rem等于100px。这样你写px单位的时候只需要除以100就可以直接换算成rem单位了！

function IsPC(){

    var userAgentInfo =  navigator.userAgent;
    var reg = new RegExp("(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)","ig");
    var isPC =  !reg.test(userAgentInfo);
    return isPC
}
var initFontSize=function(){
    var n=document.getElementsByTagName("html")[0],
        e=document.documentElement.clientWidth;
    if(IsPC()){
        if(e>750){
            n.style.fontSize = "100px"
        }else{
            n.style.fontSize = e/750*100+"px"
        }
    }else{
        n.style.fontSize=e/750*100+"px";
    }
};
initFontSize();
window.onresize=function(){
    initFontSize()
};

模板简介：该模板名称为【rem移动端完全自适应适配的2种方法】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【公众号教程】栏目查找您需要的精美模板。