如何使用rem进行移动端适配?

rem适配

rem是指相对于根元素的字体大小(font-size)的单位，根标签的font-size=1rem。其可以称作为相对单位，也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值，从而动态更新rem所相对的值，使用使得移动端网页能够适配各种型号的手机。话不多说先上代码。

js代码(用于动态修改其根标签font-size的值)：

<script type="text/javascript">        
      (function (doc, win) {
       var docEl = doc.documentElement, //文档根标签
           resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //viewport变化事，获取移动端屏幕是否翻转件源
           recalc = function () {
             //重置方法
               var clientWidth = docEl.clientWidth;
               if (!clientWidth) return;
               // 改变DOM根节点fontSize大小的值;
      // (屏幕宽度/设计图宽度) = 缩放或扩大的比例值;
               if(clientWidth>=640){
                   docEl.style.fontSize = '100px';
               }else{
                   docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
               }
           };

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

我们来看一下通过改变手机的型号(视口的大小)对于页面的元素有什么变化。
            

从上述两张图我们可以看出，当我们改变手机的型号后(改变完成后记得要刷新哦)，视口的大小也发生了改变，对于test元素的宽高也发生了改变，此时我们就能够进行进行移动端适配了。

rem适配原理

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

• 优点：没有破坏完美视口
• 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

less+rem解决转换复杂问题

使用less中进行运算，减少了我们手动进行计算所需要的rem值，也可以使用stylus,scss等css预处理器，来进行对于rem的运算,该例子需要结合上述js代码来进行搭配。
 此时我们的less代码为:

/* 此时我们的750为设计图大小,具体值应该跟随设计图大小来进行设置 */
/* 对于750/16rem的逻辑为:因为16rem为占据页面的总宽,所以750(设计图的宽度)/16rem得出1rem与设计图的等比 */
/* 这个适合我们就可以根据该元素在设计图的宽度来设计大小啦,例如test的宽高为200px,那么我们就可以这样来写： */
    @rem:750/16rem;
    #test{
              width: 200/@rem;
              height: 200/@rem;
              background: pink;
              text-align: center;
              line-height: 200/@rem;
          }

注意！需要结合上述的js代码来一起使用哦！