帝国cms移动端使用js控制rem适配字体的方法介绍，是教大家如何使用js控制移动端rem适配字体的方法的教程。

方法一：设置fontsize 按照iphone 5的适配  1em=10px,适配320

// “()()”表示自执行函数

(function (doc, win) {

  var docEl = doc.documentElement,

    // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize

      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

      recalc = function () {

        //clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框

        var clientWidth = docEl.clientWidth;

        if (!clientWidth) return;

        docEl.style.fontSize = 10*(clientWidth / 320) + 'px';

      };

 

  recalc();

  //判断是否支持监听事件 ，不支持则停止

  if (!doc.addEventListener) return;

  //注册翻转事件

  win.addEventListener(resizeEvt, recalc, false);

 

})(document, window);

方法二：按照iPhone6的尺寸设计    是375/25=15px

(function (docs, win) {

  var docEls = docs.documentElement,

  resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',

  recalcs = function () {

  //getBoundingClientRect()这个方法返回一个矩形对象

  window.rem = docEls.getBoundingClientRect().width/25;

  docEls.style.fontSize = window.rem + 'px';

};

  recalcs();

  if (!docs.addEventListener) return;

  win.addEventListener(resizeEvts, recalcs, false);

})(document, window);

方式三：采用media

html {

    font - size: 20 px;

 }

  @media only screen and(min - width: 401 px) {

      html {

          font - size: 25 px!important;

      }

  }

  @media only screen and(min - width: 428 px) {

     html {

         font - size: 26.75 px!important;

     }

 }

 @media only screen and(min - width: 481 px) {

    html {

        font - size: 30 px!important;

     }

 }

 @media only screen and(min - width: 569 px) {

     html {

         font - size: 35 px!important;

     }

 }

 @media only screen and(min - width: 641 px) {

    html {

        font - size: 40 px!important;

    }

}

以上是移动端使用js控制rem适配字体的教程。