android h5 rem插件,移动端webH5页面开发（rem布局）

之前写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();

}();