1. 程式人生 > >移動端rem適配程式碼

移動端rem適配程式碼

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>