JS实现rem适配

1.rem定义

rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。

eg：页面中设置html标签的font-size为16px时，1rem = 16px

html{
    font-size:16px;//根元素字体大小，此时1rem = 16px
}

2.根据不同设备宽度来动态设置html字体大小，实现rem不同设备下的适配

 eg：以电脑1920px设计宽度为例，根据实际屏幕宽度设置html根元素font-size大小，1rem就等于

rem = 屏幕宽度 / 设计稿宽度(1920px) *100

若屏幕宽度为1920px，即1rem = 100px，假如需要设置某个div标题大小为20px,宽为200px，高100px，则

div{
    font-size:0.2rem,
    width:2rem,
    height:1rem
}

这样在不同屏幕下，不同DOM元素的实际大小为  屏幕宽度 / 1920，实现了等比例缩放

rem适配代码实现：

(function(designWidth, maxWidth) {
	var doc = document,
		win = window,
		docEl = doc.documentElement,
		remStyle = document.createElement("style"),
		tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;//屏幕宽度
		maxWidth = maxWidth || 540;//设置最大宽度
		width < 800  && (width = 800);//设置最小宽度
		width > maxWidth && (width = maxWidth);
		var rem = width * 100 / designWidth;//屏幕宽度 / 设计稿宽度 * 100，若为电脑运行，此时rem=100
		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'//此时重新定义html根元素大小为1rem，即100px
	}

	if (docEl.firstElementChild) {
		docEl.firstElementChild.appendChild(remStyle);
	} else {
		var wrap = doc.createElement("div");
		wrap.appendChild(remStyle);
		doc.write(wrap.innerHTML);
		wrap = null;
	}
	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();

	win.addEventListener("resize", function() {
		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);

	win.addEventListener("pageshow", function(e) {
		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);
			tid = setTimeout(refreshRem, 300);
		}
	}, false);

	if (doc.readyState === "complete") {
		doc.body.style.fontSize = "16px";
	} else {
		doc.addEventListener("DOMContentLoaded", function(e) {
			doc.body.style.fontSize = "16px";
		}, false);
	}
})(1920, maxWidth);//此处传入设计稿宽度及最大宽度

将代码放在js文件中，在页面进行调用，或直接写在index.html页面script标签内。