移动端的rem适配

<!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>
posted @ 2018-11-14 22:23 红炉一点雪cck 阅读(249) 评论(0) 收藏举报
刷新页面返回顶部