以需求来介入：
都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。
我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。
（1）iPhone4的时候，希望网页的内容文字大小12px=12*（320/320）px，按钮的大小是240px。
（2）Iphone6的时候，虚妄网页的内容文字大小14px=12*（375/320）px，按钮的大小是280px，等比缩放。
（3）Iphone6 Plus的时候，虚妄网页的内容文字大小15.5px=12*（414/320）px，按钮的大小是310px，等比缩放。
以前的做法
在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制
viewport 的 initial-scale （网页缩放比例）。
如：iPhone4下：
那么对应的到了iPhone6需要调整缩放比例 initial-scale=375/320 =1.18
同理到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30
早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。
缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。
rem做法
现在【天猫】的做法就是用rem来做。
rem（font size of the root element）是指相对于根元素的字体大小的单位（可以联想一下em）。也就是比如我定义：
那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是
我们来看一下【淘宝】的实例：
先展示效果，可以看到页面上的文字、按钮、logo都有相应的变大调整。
iPhone4下的效果。
iPhone6下的效果。
iPhone6 Plus下的效果。
（图片上传太慢，图片上传不了啊.........，用代码展示）
iPhone4下html节点font-size
iPhone6下html节点font-size
iPhone6 Plus下html节点font-size
具体大家可以去看【淘宝】的移动端页面的案例。
给大家介绍一片写rem的详细文章。腾旭ISUX的一篇文章。
