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

(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);

(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);

1 html {

 2     font - size: 20 px;

 3 }

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

 5     html {

 6         font - size: 25 px!important;

 7     }

 8 }

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

10     html {

11         font - size: 26.75 px!important;

12     }

13 }

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

15     html {

16         font - size: 30 px!important;

17     }

18 }

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

20     html {

21         font - size: 35 px!important;

22     }

23 }

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

25     html {

26         font - size: 40 px!important;

27     }

28 }

复制代码