移动端适配rem的两种方法

rem是根据你的根元素html的字体大小进行换算的，所以一切换算都要从font-size进行着手。

方法一：用media方法

就是根据你需要的几台设备来进行设置来进行适配。代码类似如下：

   html{
        font-size: 100px;
    } 
     /* ip6 */
    @media screen and (min-width:375px) {
        html{
            font-size: 117.1875px;
        }
    }
       /* ip6p */
    @media screen and (min-width:414px) {
        html{
            font-size: 129.375px;
        }
    }
       /* ipad */
    @media screen and (min-width:768px){
        html{
            font-size: 240px;
        }
    }

这里是以iphone5的屏幕分辨率320为基准，font-size设置成为100px，是为了好计算rem，因为在谷歌浏览器中字体大小是默认为16px，有着这样的运算1rem=16px，所以当你把字体大小设置成为100px的时候，此时，1rem=100px，那么在换算的时候会更加简单，只要将px除以100即可。

那么如何通过iphone5的屏幕分辨率320以及大小100px来计算iphone6甚至ipad的字体大小呢？
我们知道iphone6的屏幕宽度尺寸是375，所以他对于的字体大小是（375*100）/320 ，即117.1875px。同理可以算出其他设备的大小。

举例介绍：

body设置：
<div> iphone5  </div>  
css设置：
 width: 100%;
 height: 1rem;
 background-color: red;
 font-size: 30px
 再加上上面的设置，这里就不写了。

效果如下：
在iPhone 5 下：
移动端适配rem的两种方法
可以看到我设置的div的高度就是1rem，也就是100；

在iphone6下：
移动端适配rem的两种方法
可以看到div的高度有变化，变化成了117.19px，说明方法成立。

方法二：用js进行设置

这样就可以适配所有的设备，在你的代码中插入如下片段：

(function (doc, win, undefined) {
            var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
              recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (clientWidth === undefined) return;
                //以ip5为基准  
                docEl.style.fontSize =(clientWidth*100) / 320 + 'px';
             };
           if (doc.addEventListener === undefined) return;
         win.addEventListener(resizeEvt, recalc, false);
           doc.addEventListener('DOMContentLoaded', recalc, false)
         })(document, window);

我们单独来看这一段代码的意思：
docEl.style.fontSize =(clientWidth*100) / 320+ ‘px’;
意思就是说你当前的屏幕尺寸去乘以100，这里的100也就相当于在修改默认字体的大小，变成了100px，（所以在换算成rem的时候，用你得到的px单位再除以100即可）再除以320，就是iPhone5的屏幕尺寸。
算法同上面的，上面的理解了，这里的也就理解了。

如果你想以iphone6为基准，则只需要把屏幕大小换成iphone6的即可：
docEl.style.fontSize =(clientWidth*100) / 375+ ‘px’;

以iphone6为基准的效果图：（body以及css代码同上）
高度是1rem 所以这里是100px
移动端适配rem的两种方法

在其他设备上：
在iPhone5上：高度是85.33
即（320*100）/375
移动端适配rem的两种方法

在ipad上：
移动端适配rem的两种方法

最后如果根据设计稿的尺寸来写页面的话如果是640的大小，则是以iphone5的屏幕大小来设置的，你在设置的时候 font-size就要设置成50px，因为设计稿的尺寸640是iphone5的屏幕大小320的两倍，有一个DPR的存在，是2.0。

所以给你一个设计稿，要你写页面，如果说大小是640，即以iphone5的屏幕大小来设置的，则字体大小设置成为50px；
同理，如果设计稿大小是750，即以iphone6的屏幕大小来设置的，字体大小也要设置成为50px。
但是！在换算的时候：还是用你得到的px大小除以100！

秒客网

移动端适配rem的两种方法