移动端rem计算布局

rem计算

其实看到网站各位大神已经列出很多现在主流的单位计算方案，我现在呢就做一下自己比较中意的一种方式吧。

js动态计算

document.documentElement.style.fontSize =document.documentElement.clientWidth / 750 + 'px'

这里除以多少的数值都可以，只要好计算，目前设计稿大多都是750的尺寸，除以15,50都可以。比如把我们的html的font-size设置成1px，这样1rem就等于1px，这里因为设计稿750px，因为是基于二倍屏的，1个css单位等于2个实际单位，所以我们的font-size设置为0.5px，这样我们设置尺寸时，rem和标注稿的px，就是1比1的比例。

另外，附上在评论区看到一位网者列出的一个方法：

（function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if(!clientWidth) return;
			if(clientWidth >= 750) {
				docEl.style.fontSize = '100px';
			} else {
				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
			}
		};
	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);