区分CSS单位：px、em、rem、rpx

记录一下前端开发中容易混乱的几个单位：px、em、rem、rpx（用于微信小程序）

1.px：绝对单位，名称为像素。像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你所用屏幕分辨率的最小分割)。

2.em：相对单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em单位转换为像素值：当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。·

例如，如果一个 div 有 20px 字体大小，10em 将等同于 200px，即 10 × 20 = 200px。

note:

• em的值并不是固定的； 
• em会继承父级元素的字体大小。

我们还需要注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 
所以我们在写CSS的时候，需要注意几点： 

1. body选择器中声明Font-size=62.5%； 
2. 将你的原来的px数值除以10，然后换上em作为单位； 
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在父元素div中声明了字体大小为1.2em，那么在声明子元素p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承div的字体高而变为了1em=12px。

3.rem：相对单位，可以理解为”root em”, 它是相对根节点html的字体大小来计算的。这个单位避免了em因继承关系产生的不必要的副作用。我们只要在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照。

rem单位转换为像素值：比如根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160px。 

html  {font-size:62.5%;}/* 10÷16=62.5% */

body  {font-size:12px;font-size:1.2rem ;} /* 12÷10=1.2 */

p  {font-size:14px;font-size:1.4rem;}

note：chrome/firefox/IE9+支持。为了兼容不支持 rem 的浏览器，我们需要在 rem 前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。

4.rpx（responsive pixel）: 小程序中使用的相对单位。可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 
其用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。 

em和rem详解可参考：http://caibaojian.com/rem-vs-em.html