一、移动端的特点

设备尺寸不同；
可以通过设置百分比解决；
设置百分比计算繁琐。

二、单位概述

px：像素；
em：相对于父级的font-size值的几倍；
rem：相对于 html标签的font-size值的几倍。

em代码示例：

.em {
	font-size: 10px;
}
.em-box {
	width: 10em;
	height: 10em;
	background-color: red;
}

<div class="em">
	<div class="em-box"></div>
</div>

当父元素em的font-size为10px时：

.em {
	font-size: 10px;
}

在这里插入图片描述
当父元素em的font-size为30px时：

.em {
	font-size: 30px;
}

在这里插入图片描述
rem代码实例：

.rem {
	width: 10rem;
	height: 10rem;
	background-color: yellow;
}

<div class="rem">
	<div class="em-box"></div>
</div>

html为默认font-size时：
在这里插入图片描述
html的font-size为20px时：

注意：html的font-size:20px时，1rem代表20px；10rem代表200px。

三、rem单位的应用

通过js文件，根据浏览器的视窗宽度设置html元素的fontsize值。

代码如下：

(function (doc, win) {
	var docEl = doc.document,
    	resizeEvt = 'orientationchange' in window ? 'orientationchange',
        recalc = function () {
        	var clientwidth = docEl.clientWidth;
			if (!clientwidth) return;
			// 750是设计图的宽度，100是一个基准宽度（html的font-size值）
				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		}
		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
		document.querySelector(".loading").style.display = "none";
})(document, window)