[移动端]rem适配

原理：给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。font-size的取值通过js计算。

但字体不用rem单位，原因如下：

1.设计师要求：任何手机屏幕上字体大小都要统一

2.显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

3.有一种叫做点阵字体的存在（什么是点阵字体），也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。(不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体。)

 

一.雪碧图

.icon {
			width: 1.4rem;
			height: 1.4rem;
　　　　　　　　　　　　　　background: none; 
　　　　　　　　　　　　　　position: relative; 
　　　　　　　　　　　　　　overflow: hidden;
　　　　　　　　　　　　　　background-position: 0 -1.4rem;
		}
		.icon:after {
			content: '';
			display: block;
			width: 10000%;
			height: 10000%;
			position: absolute;
			left: 0;
			top: 0;
			background-image: url(sprite.png);
			background-repeat: no-repeat;
			background-size: 140rem;
			-webkit-transform-origin: 0 0;
			-webkit-transform: scale(.01);
			transform-origin: 0 0;
			transform: scale(.01);
　　　　　　　　　　　　　　background-position: 0 -140rem;

　　　　　　　　　　}