之前写H5页面时，虽然也是采用rem布局，但是仍然采用的是媒体查询对根元素进行单独设置，这样不仅麻烦而且设置的时候还不太准确。现在经过改进，直接采用js动态计算，完全不用再去管媒体查询啦。
一、第一种方案（但又欠缺，需要等到dom完成后才执行）
$(function(){
//初始化html像素
initHTML();
$(window).resize(function(event) {
initHTML();
});
});
//初始化html像素
function initHTML(){
//获取当前窗口的高度
var window_w=$(window).width();
// 当前屏幕背景图宽度(750为设计图的宽度)
var now_pic_k=window_w/750*100;
// 现在html字体的大小
var now_html_size=now_pic_k;
document.documentElement.style.fontSize=now_html_size+'px';
}
二、第二种方案，页面加载时就执行（在head标签中加入）
// rem.js
!function() {
var html = document.documentElement;
var setFontSize = function() {
var width = html.offsetWidth;
if(width <= 750) {
html.style.fontSize = width / 7.5+ 'px';
} else {
html.style.fontSize = 100 + 'px';
}
};
var timer;
var setDelay = function() {
return clearTimeout(timer), (timer = setTimeout(setFontSize, 150));
}
window.addEventListener('pageshow', function(evt) {
return evt.persisted && setDelay();
});
window.addEventListener('resize', setDelay);
setFontSize();
}();
