移動端的rem適配

時間 2019-12-01

標籤移動端的 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。