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自适应方案  以方便查看最新的使用说明和提交问题。