レム適応の一般的なパッケージ3つについて

エクスポート関数 rem (doc, win) {
  docEl = doc.documentElement とします。
  // 画面回転イベントを考慮し、互換性を持たせる let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  再計算 = 関数 () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) 戻り値:
            クライアント幅 >= 750 の場合
                 docEl.style.fontSize = '100px';
            } それ以外 {
                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
      };

   doc.addEventListener の場合、戻り値は次のようになります。
    win.addEventListener(resizeEvt, recalc, false); // 画面のサイズと回転に適応します doc.addEventListener('DOMContentLoaded', recalc, false); // ページが最初に開かれたときに適応します recalc();
};

エクスポート関数 rem() {
  var fz = document.querySelector('html').offsetWidth / 7.5; //デザイン図 750 1rem=100px
  document.querySelector('html').style.fontSize =
    fz <= 100 ? fz + 'px' : '100px';
  window.onresize = 関数() {
    レム();
  };
};

エクスポート関数 rem() {
  document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
  document.body.style.fontSize = '14px'; // ページにスタイルのない大きすぎるフォントが表示されないように、本文のフォント サイズを復元します}