-
px单位
一般我都是使用px来设置我们的文本，因为它比较稳定和精确。但是px本身却存在一些问题，当用户在浏览器我们的页面时，如果他改变了浏览器的字体大小，这时会使我们的Web页面布局被打破。这样的话对于关心网页布局展示的用户来说，这就是一个必须解决的大问题。因此，就提出了使用em来定义Web页面的字体。
-
em单位
em的使用需要一个参考点，一般以<heml>的font-size为基准。好多网上说em是相对于父元素的font-size来改变大小的，然而严格来讲em如果当前元素设置了font-size那么em是相对当前元素的font-size的值。比如：设置一个父元素的font-size:10px; 其子元素的font-size:1.2em; padding-left:1em; 然后你可以通过调试工具查看到padding-left 为12px，也就是子元素的font-size
- 这里有个需要注意的点:如果父元素的font-size的值小于12那么font-size默认是12，因为font-size的最小设置值是12。所以你会发现即使你把当前元素的font-size删除掉padding-left的值依然是12。
-
rem单位
rem是CSS3新引进来的一个度量单位，虽然是新引进来的但是支持的浏览器还是蛮多的。比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。但却不支持IE6-8，不过如果需要兼容其他浏览器可以让px和rem混合使用，使用的时候可以先写一个px再写一个rem因为写在后面的优先级高，所以如果浏览器检测到支持rem那么会先使用rem如果不支持则会忽略而使用px
下面奉上我写手机端使用到的rem适配
一、新建rem.js文件
二、将一下代码拷入文件：
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (clientWidth / 7.5) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
其中需要说明的是7.5是设计图的宽度也就是手机的宽度除以100得到7.5。原本是可以直接写750但是由于font-size的大小不能小于12不然默认就是12所以将其值缩小100倍，在项目中使用rem的时候再除以100来持恒。
三、在main.js中引入rem.js
四、使用实例
<div style="background:red;width: 7.5rem; > 第一个view </div>
<div style="background:black;width: 3.75rem; > 第二个view </div>
这里需要说明的是7.5其实是750；3.75其实是375；原因上面已经阐述了由于在计算的除了100所以这里也需要除以100.
