關于rem適配的3種常用封裝

發布時間: 2019-03-16 00:48:39 來源: 互聯網 欄目: 心得技巧 點擊:

這篇文章主要給大家介紹了關于rem適配的3種常用封裝,文中通過示例代碼介紹的非常詳細,對各位前端開發者們具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

前言

在之前寫了一篇關于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適配的3種常用封裝
本文地址: http://www.leskzw.tw/web/xindejiqiao/208987.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    跨域圖片資源權限(CORS enabled image)淺談移動端適配大法
    Top 广东好彩1中奖规则