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