自适应开发——rem

摘要：rem 是相对于 html 的 font-size，只须要肯定了 html 的 font-size 的 px 字号，就能够计算出元素的宽高。

什么是 rem

首先你们应该知道 em 单位，em 指的是相对于父元素的字体大小的单位，而 rem 指的是相对于 html 的字体大小的单位。例如：html 的 font-size 值为 10px ，那么 1rem 表明的就是 10px，2rem 表明的就是 20px。

目前主要的布局方式

1.流式布局  
流式布局的方式，是将宽度设置成百分比，高度采用 px 固定高度，主要案例如：亚马逊、携程。虽然这种方式可让各类屏幕都适配，可是现实的效果很是差，在大屏幕手机下页面元素会被拉长，只有部分手机能够较好的呈现设计图效果。
2.固定宽度  
早期有些页面写成了固定宽度，超出的部分留白，这种方式的弊端在于大屏幕手机下页面会显得很是小，并且白边也很差看，不符合如今人们的审美。
3.响应式布局  
采用响应式配合媒体查询的方法，能够在不一样屏幕尺寸下呈现出不一样的页面效果，的确是很不错，可是缺点在于开发成本较大，至关于要开发多套页面，只能在小项目上使用，若是是大型项目的话，感受是划不来的。
4.rem 等比例布局  
rem 可以在不一样的屏幕尺寸下显示等比例的页面，我认为是既知足需求又省力的作法。

rem 的原理

说了这么多，该说说 rem 的工做原理了。  
 

html{
   font-size: 10px;
}
div{
   width: 10rem;
   height: 5rem;
   background: skyblue;
   color: #000000;
   text-align: center;
   line-height: 5rem;
   font-size: 1.2rem;
}

效果以下图：

此时 1rem = 10px。

接下来咱们改变 html 的 font-size 为 20px。

效果以下图：

在宽高的rem值没有变的状况下，咱们只改变了 html 的 font-size 值，就改变了元素的大小。

此时的 1rem = 20px。

由此咱们得出方法，经过媒体查询，在不一样屏幕尺寸状况下，设置不一样的 html 的 font-size 值就能够调节rem大小。可是屏幕尺寸这么多，咱们不能一个一个的设置吧，因而想到了用 js 来设置。

//designWidth:设计稿的实际宽度值，须要根据实际设置
//maxWidth:制做稿的最大宽度值，须要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制做稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(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);
	}
})(750, 750);

接下来就能够开心的写代码了。