rem適配的有幾種常用封裝

這篇文章給大家分享的是有關rem適配的有幾種常用封裝的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、rem1.js

第一種方法考慮了m端屏幕旋轉的問題.對兼容性做出了一定的處理,具體看代碼.

export function rem (doc, win) {
  let docEl = doc.documentElement;
  //考慮以及兼容了 屏幕旋轉的事件
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  let 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);     // 頁面初次打開自適應
    recalc();
};

二、rem2.js

采用html標簽的offsetWidth長度計算,

export function rem() {
  var fz = document.querySelector('html').offsetWidth / 7.5; //設計圖 750 1rem=100px
  document.querySelector('html').style.fontSize =
    fz <= 100 ? fz + 'px' : '100px';
  window.onresize = function() {
    rem();
  };
};

三、rem3.js

采用window.innerWidth計算,設置了body fontSize防止字體繼承,使頁面字體過大.

export function rem() {
  document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
  document.body.style.fontSize = '14px';// 在body上將字體還原大小，避免頁面無樣式字體超大
}

感謝各位的閱讀！關于“rem適配的有幾種常用封裝”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！