rem实现响应式布局 js动态计算rem

什么是rem

• rem是相对于根元素（html标签）的字体大小的单位。

• css3规定1rem=html根节点的font-size，rem也就是root em简写。

动态计算rem

• 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。

• 实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。通过此方法，rem大小始终为width的n等分。

• 最终效果：通常设计稿是指定的某个分辨率（比如常见移动端750px），要想在不同分辨率下看到同样的效果（等比例缩放），这里就需要使用js动态计算rem，达到我们想要的效果。

计算代码

<script type="text/javascript">
	(function(doc, win) {
		var docEl = doc.documentElement,
			resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function() {
				var clientWidth = docEl.clientWidth;
				clientWidth > 750 && (clientWidth = 750),
					clientWidth < 375 && (clientWidth = 375),
					docEl.style.fontSize = 100 * (clientWidth / 750) * (window.devicePixelRatio || 1) + 'px';
			};

		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script>

扩展

• 设备像素也就是物理像素：是屏幕上的一个个无法再拆分的点。

• 设备独立像素：是虚拟像素（横坐标轴上或纵坐标轴上的），比如某一台手机分辨率（设备像素）是480*800，纵向手持的宽度（设备独立像素）是320px，那么设备像素比就是480/320=1.5。

• 设备像素比：设备像素比 = 设备像素 / 设备独立像素。