分享一个rem布局解决方案，解决使用flexible布局时10rem大于屏宽的问题

原贴地址: https://www.yukapril.com/2017/03/05/js-flexible.html

改进说明

由于公司主要业务都是微信公众号页面，之前项目用的是淘宝rem解决方案，但某些手机微信上页面10rem宽会出现超出屏幕的问题，百度了一下没找到解决方案，最后在github上面搜了很久查到上面那个解决方案，但发现还是会出问题，一开始进入页面没问题，刷新页面或者输入框聚焦之后问题又出来了。同时适配了540px最大宽度，如果不需要的话也可以去掉。

改进后的代码

(function (win) {
      // html根元素
      var HTML_ELEMENT = document.documentElement;
      // 屏幕宽度
      var SCREEN_WIDTH = 0;
      // 标准fontSize计算值
      var BASE_FONT_SIZE = 0;
      // 处理后的fontSize计算值
      var REAL_BASE_FONT_SIZE = 0;
      var timeout = null;
      /**
      * 修复异常的fontSize代码
      */
      var fix = function () {
        var ua = navigator.userAgent;
        var isIOS = /(iPhone|iPad|iPod)/.test(ua);
        // 非苹果设备，均进行检测
        if (!isIOS) {
          var div = win.document.createElement('div');
          div.style.width = '10rem';
          win.document.body.appendChild(div);
          var getWidth = parseFloat(div.getBoundingClientRect().width);
          if (getWidth > SCREEN_WIDTH) {
            // 此时是出问题的情况
            var ratio = getWidth / SCREEN_WIDTH;
            REAL_BASE_FONT_SIZE = (BASE_FONT_SIZE / ratio).toFixed(4);
            HTML_ELEMENT.style.fontSize = REAL_BASE_FONT_SIZE + 'px';
          }
          div.remove();
        }
      };

      /**
       * 调整根元素fontSize
       */
      var setBaseFontSize = function () {
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
          // 获取屏幕宽度
          SCREEN_WIDTH = HTML_ELEMENT.clientWidth;
          SCREEN_WIDTH = SCREEN_WIDTH > 540 ? 540 : SCREEN_WIDTH;
          // 将屏幕分成10份，获取每一份宽度
          BASE_FONT_SIZE = SCREEN_WIDTH / 10;
          // 写入html元素fontSize
          HTML_ELEMENT.style.fontSize = BASE_FONT_SIZE + 'px';
          fix();
        }, 300);
      };
      document.addEventListener('DOMContentLoaded', function () {
        win.addEventListener('orientationchange', function () {
          setBaseFontSize();
        });
        win.addEventListener('resize', function () {
          setBaseFontSize();
        });
        setBaseFontSize();
      });
    })(window);