用js进行rem适配

用js进行rem适配

rem适配屏幕css文件
1.将屏幕宽度设为750px

// JavaScript Document
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {				
            var clientWidth = docEl.clientWidth; //获取设备尺寸       
            if (!clientWidth) return;
            if(clientWidth>=750){ //设计稿宽度
                 docEl.style.fontSize = '100px';
            }else{								
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false); //绑定事件
    doc.addEventListener('DOMContentLoaded', recalc, false);
    
})(document, window);

2.将页面的宽度分成10份

(function () {
      var docEl = document.documentElement;

      function setRemUnit () {
        // 获取到rem的基准值
        var rem = docEl.clientWidth / 10;

        // 动态设置html根元素的fontSize
        docEl.style.fontSize = rem + 'px';
      }

      setRemUnit();

      // 窗口大小变化时 触发
      window.addEventListener('resize', setRemUnit);

      // 窗口出现在当前屏幕时
      window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          setRemUnit();
        }
      });
    })();