移动端的rem适配

2018-11-20 03:17:45来源：博客园阅读 ()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0;padding:0;}
            ul{
                width:100%;
                height:1rem;
                background: red;
            }
            li{
                width:1rem;
                height:1rem;
                font-size:0.2rem;
                color:blue;
                float:left;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>小桥</li>
            <li>流水</li>
            <li>人家</li>
        </ul>
    </body>
    <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>
</html>