为什么使用rem？

rem是什么？

rem（font size of the root element )是指相对于根元素的字体大小单位。而与之相似的em( font size of the element )是指相对于父元素的字体大小的单位。

---

一般 web app怎样做？

1、固定宽度的做法

主体的宽度设置为320，超出部分留白。

常见的有淘宝、亚马逊、携程等的web app。

2、响应式的做法

很少有大型的网站在移动端用响应式的做法，主要原因是工作量大，维护性难。但是，中小型的门户或者博客类站点会采用响应式的方法从web page 到 web app 直接一步到位，节约成本。

3、设置viewport的做法

<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

将浏览器的设置为320，最大可以放大到320*1.3=416（这个基本可以满足当前iPhone6 plus的屏幕）

4、设置rem的做法
一、通过js动态的计算根元素的font-size，这样的好处是所有的设备的分辨率都能够兼容适配。

(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
            docEI.style.fontSize = 20*(clientWidth/320)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

二、淘宝首页目前采用的是js动态改变根元素大小的方法，但是，一般情况下，我们在开发一个新的产品的时候，会针对目前市场上的主流设备进行适配。这时我们也可以通过以下方法进行设置，进行主流设备的适配。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}