移动端rem适配代码

版权声明:转载请注明出处 https://blog.csdn.net/qdmoment/article/details/84103501

rem字体设置是根据font-size相对设置:

<script type="text/javascript">
    function rems(){

        // 获取屏幕宽度(此处是一个兼容的写法)
        var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
        
        //设置根元素的fontSize的大小,此处的3.2是--设计图的宽度/100
        document.documentElement.style.fontSize=htmlWidth/3.2+"px";
        
        // 设置条件屏幕宽度最大值
        if(htmlWidth>640){
            htmlWidth=640;
            document.documentElement.style.fontSize=htmlWidth/3.2+"px";
        }    
    }
    //默认调用适配函数
    rems();
    //window大小变化时调用适配函数
    window.onresize=function(){
        rems()
    }
</script>

猜你喜欢

转载自blog.csdn.net/qdmoment/article/details/84103501