欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 公众号教程 >

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

    2018-04-27 11:13 来源/作者:懒人模板 分类:公众号教程  « »
    方法一:
      将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()
    };

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议