H5页面自适应各种手机端屏幕分辨率的大小

之前写h5注册页的时候，总是适配不好，用过媒体查询，但是效果不太好，而且要适配的尺寸太多了，总归有遗漏的，时长达不到ui设计图的标准，后来在网上找了一篇适配的js代码，但是因为不太明白，所以使用的也不好哈哈，现在算是明白了点，故将代码放上 原文出处：https://www.jianshu.com/p/26ce1458df65

			; (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 > maxWidth && (width = maxWidth);
					var rem = width * 100 / designWidth;
					remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
				}

				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);
				}
			})(1080, 1920);

最后有两个参数是需要手动调整的，分别是 设计稿的宽度和最大宽度，我这里设计稿的宽度是1080，然后给他设定的最大宽度是1920，设定好之后就可以随心所欲地使用rem了哈哈

比如说量的尺寸是距离顶部882px，我们可以这样写top:8.82rem，原尺寸除以100就可以了，这段代码要放在头部script标签的最前面