javascript 移動端h5頁面自適應

 

最簡單的適配方案

         var html = document.querySelector("html");
            var    rem = html.offsetWidth / 7.5;
            html.style.fontSize = rem + "px";

7.5 為 設計圖的寬度除以100；

 

 

 

H5端自適應框架 使用方便，設計圖的1px對應0.01rem,設計圖的字體大小24px對應0.24rem,就是如此簡單！

詳情參考 H5自適應方案 

使用方法：

在頁面head寫入以下代碼，實時更新html的fontsize:

<script src="js/adaptive.js"></script>
<script>
    // 設計圖寬度
    window['adaptive'].desinWidth = 750;
    // body 字體大小
    window['adaptive'].baseFont = 18;
    /*
    // 顯示最大寬度 可選
    window['adaptive'].maxWidth = 480;
    // rem值改變后執行方法 可選
    window['adaptive'].setRemCallback = function () {
        alert(1)
    }
    */
    // 初始化
    window['adaptive'].init();
</script>

　　

css樣式：
正常情況下的寫法：
 div{
      width:100px;
      height:200px;
      border:1px solid #F00;
      padding:20px;
    }
使用自適應方法，px用rem ，1px的仍然可以用1px，可以改寫為：
    div{
      width:1rem;
      height:2rem;
      border:1px solid #F00;
      padding:0.2rem 
    }

 此適配方案在github持續優化，如有問題可以移步 javascript H5自適應方案  以方便查看最新的使用說明和提交問題。