[移動端]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;

　　　　　　　　　　}