rem

js原理就是 真实宽度/设计图宽度 = 真实字体号大小/设计图字号大小
所以 js应该是 获取当前页面的宽度为真实宽度
然后通过上面这个公式 把真实字体字号大小求出来
然后这个真实字号大小赋给html的字号 作为rem的计算比例
最后再根据这个计算比例 来设置所有容器的宽度
需要在JS里面 设置的 是设计图字号 和设计图的宽度
然后再计算出来真是的宽度

<script type="text/javascript">
		(function() {
			change();

			function change() {
				/* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的htm
				 * l的fontSize（clientWidth  新的值）就是clientWidth*20/320 */
				document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 320 + 'px';
				console.log(document.documentElement.style.fontSize)
			}
			/* 监听窗口大小发生改变时 */
			window.addEventListener('resize', change, false)
			window.addEventListener('pageshow', change, false);

		})();
	</script>

<div id="">
			我是10REM
		</div>

<style type="text/css">
			div {
				background: red;
				width: 10rem;
			}
		</style>