移动端 rem的用法

什么是rem呢？
首先我们要知道em， em（font size of the element）是指相对于父元素的字体大小的单位。 而rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。它是基于我们页面中的字号的大小来进行适应 的 也就是说 rem并不是固定的 比如 大多数浏览器的默认字号是16px； 此时1rem = 16px ；但是如果我们在页面中设置字号为10px； 此时1rem = 10px；
如果还是不理解请看下图
下图是字体为10px时 1rem的大小
下面是 字号为30px时rem的大小
通过上图中的对比 我们可以很清晰的看出 来 两个方形大小不一样但是都是5rem 不同的是页面中的字号一个为10px 另一个为30px；据此我们大概知道rem的用法了

那么我们为什么要用rem呢？ 用px 不是更好吗？

移动端

首先我们要了解移动端最麻烦的是什么？

不同分辨率适配！

具体来说，有的屏幕宽750px，有的屏幕宽640px，有的甚至更宽，如果你写固定px，那么要么小的放不满，要么大的有大片留白。

既然如此那么我们怎么办呢？ 当然是用rem啦
上面我们了解到rem是根据页面中字号来改变大小的
那么我们是不是可以根据改变屏幕分辨率的大小来改变字号并以此来使用我们的rem呢
请看下面的代码

<script type="text/javascript">
		(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);
	</script>

这是rem布局的核心代码，意是：
如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 750px) 注：用100px=1rem 是为了方便换算

这样我们就可以用rem来制作移动端页面了
下面是本人用rem制作的移动端页面