rem

1.rem说明：相对长度单位，相对于根元素(即html元素)的font-size来计算

2.rem与px的转换

rem是相对于根元素html的font-size的属性来计算的。

所以我们只需要在html根元素确定一个参考值（font-size），这个参考值设置为多少，完全可以根据您自己的需求来定。

html 默认 font-size = 16
  px  |        rem      
 - - - - - - - - - - -
  12  | 12/16 = .75  
  14  | 14/16 = .875  
  16  | 16/16 = 1    
  18  | 18/16 = 1.125 
  20  | 20/16 = 1.25  
  24  | 24/16 = 1.5    
  30  | 30/16 = 1.875 
  36  | 36/16 = 2.25   
  42  | 42/16 = 2.625 
  48  | 48/16 = 3

为了方便计算，当我们把参考值font-size设置为10px时

    px    |          rem      
 -  -  -  -  -  -  -  -  -  -  -
    12    |  12/10 = 1.2  
    14    |  14/10 = 1.4  
    16    |  16/10 = 1.6    
    18    |  18/10 = 1.8
    20    |  20/10 = 2.0  
    24    |  24/10 = 2.4   
    30    |  30/10 = 3.0
    36    |  36/10 = 3.6  
    42    |  42/10 = 4.2
    48    |  48/10 = 4.8

因此 1rem 就等于html根元素设定的font-size的px值。

例：

我们设置html { font-size:12px; } , 之后的div宽高都以这个12为基数来换算，

设定一个div｛width：3rem；height：2.5rem；｝

换算成px ： div｛ width：36px；height：30px；｝

这时  1rem = 12px

3.各种型号的手机、ipad屏幕都不一样大，那html的font-size到底应该设为多少好呢？

试过两种办法：

    1. 利用@media媒体查询屏幕大小来控制html的font-size，以此来达到根据屏幕大小来展示页面的效果

    2. 使用js来控制

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
;(function(designWidth, maxWidth) {	var doc = document,	win = window,	docEl = doc.documentElement,	remStyle = document.createElement("style"),	tid;	function refreshRem() {		var width = docEl.getBoundingClientRect().width;		maxWidth = maxWidth || 540;		width>maxWidth && (width=maxWidth);		var rem = width * 100 / designWidth;		remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
	}	if (docEl.firstElementChild) {		docEl.firstElementChild.appendChild(remStyle);
	} else {		var wrap = doc.createElement("div");		wrap.appendChild(remStyle);		doc.write(wrap.innerHTML);		wrap = null;
	}	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
	refreshRem();	win.addEventListener("resize", function() {		clearTimeout(tid); //防止执行两次
		tid = setTimeout(refreshRem, 300);
	}, false);	win.addEventListener("pageshow", function(e) {		if (e.persisted) { // 浏览器后退的时候重新计算
			clearTimeout(tid);			tid = setTimeout(refreshRem, 300);
		}
	}, false);	if (doc.readyState === "complete") {		doc.body.style.fontSize = "16px";
	} else {		doc.addEventListener("DOMContentLoaded", function(e) {			doc.body.style.fontSize = "16px";
		}, false);
	}
})(750, 750);  //需要根据你的设计稿的大小来调整脚本最后的两个参数。

4.说明 

 rem 属于css3 中的一个属性，在众多浏览器中已经得到了较好的支持，但以下较老的浏览器不兼容（IE8及以下，火狐3.5及以下，safari4.0及以下等），所以对浏览器兼容性要求极高的项目不推荐使用，如果有不足请大家及时提醒以便及时更正

参考：http://caibaojian.com/rem-and-px.html 

          http://caibaojian.com/simple-flexible.html