H5页面自适应——rem

rem.js

1
2
3
4
5
6
7
8
9
10
11
/* rem.js文件内容 */
(function() {
var html = document.documentElement;

function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
}

window.addEventListener('resize', onWindowResize);
onWindowResize();
})();

需要注意的是在html文件的head标签中需要加入一行:

1
<meta name="viewport" content="initial-scale=1.0,width=device-width">

指定页面宽度为设备宽度。

0%