css單位有3種：
px：絕對單位
em：相對父元素的單位
rem：相對根元素（頁面的html）的單位--css3新增的
下面來仔細講下近年來在webapp中常用的rem：
什么是rem？
rem就是指相對根元素（頁面html）的單位。
例如：html設置了font-size為10px，那么1rem就是10px，2rem就是20px
html{
font-size:10px;
}
h1{
font-size:2em;//相當於20px
}
移動端布局以前使用什么方法？
一般來講，移動端會使用流式布局、固定寬度、響應式做法、viewport縮放。
1.流式布局
流式布局指的是寬度使用百分比。目前，亞馬遜、攜程、蘭亭的移動端就是用流式布局。他們寬度使用百分比，高度使用px。這樣，在不同的屏幕適配器下，寬度會被拉伸，導致比例不協調
2.固定寬度
固定寬度雖然易於開發，但是會使大屏幕兩邊留白
3.響應式做法
響應式是用media query，但是這樣並不能適應所有的屏幕
4.viewport縮放
天貓的web app的首頁就是采用這種方式去做的，以320寬度為基准，進行縮放，最大縮放為320*1.3 = 416，基本縮放到416都就可以兼容iphone6 plus的屏幕了，這個方法簡單粗暴，又高效
rem能等比適應所有的屏幕
使用rem，所有的元素都相對於根元素進行縮放，非常方便開發。最重要的點就在與計算出根元素的font-size值。可以使用JS來計算。
到這里肯定有很多人會問是怎么計算出不同分辨率下font-size的值？
首先假設頁面設計稿是按照640的標准尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組表格。
上面的表格藍色一列是Demo3中頁面的尺寸，頁面是以640的寬度去切的，怎么計算不同寬度下font-site的值，大家看表格上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同設備的寬度計算方式以此類推。
下面推薦兩個國內用了rem技術的移動站，大家可以上去參考看看他們的做法，手機淘寶目前只有首頁用了rem，淘寶native app的首頁是內嵌的web app首頁。
淘寶首頁：m.taobao.com
D X：m.dx.com
最后我們再來看一看他的兼容性：
下面是參考鏈接：
http://isux.tencent.com/web-app-rem.html
http://www.cnblogs.com/leejersey/p/3662612.html
http://div.io/topic/1092
http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
--2016.3.25