remとemの違いを簡単に話して、モバイル端末を適切にする方法について話します.

remとemの違いを話してください。

remはhtml要素のフォントサイズに基づいて決定され、emはその要素のサイズに基づいて決定され、一般的に相対長さ単位と呼ばれ、その親要素のフォントサイズに基づいて計算され、一般的にデフォルトでは16px = 1em親要素font-size:16pxの場合、子要素margin:0.8em.では、得られた大きさは0.8 * 16 =12.8です.
すべての単位がemを採用する場合、bodyのfont-sizeを変更するだけで、他のサブ要素の幅が動的に変化し、明らかに便利です.emとrem単位の違いは、ブラウザが誰によってpx値に変換されるかです.remは、css3の欠点を解決するために追加されたemの相対長さ単位であり、emは親要素に対するフォントサイズと言えるが、親要素のフォントサイズが変更されると、再計算される.
remが現れると、remはルートディレクトリ、すなわちHTML に対してのみ解決される.remという単位があれば、ルート要素htmlのfont-sizeを調整するだけで、すべての要素の動的適合を達成することができます.

移動端-固定寸法(750 px)を基準-pxをremに変換

(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var devicePixelRatio = win.devicePixelRatio;
  var dpr = 1;
  var scale = 1;

  //   vierPort
  function setViewport() {
    dpr = 1;
    win.devicePixelRatioValue = dpr;
    scale = 1 / dpr;
    var metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute(
      'content',
      'initial-scale=' +
        scale +
        ', maximum-scale=' +
        scale +
        ', minimum-scale=' +
        scale +
        ', user-scalable=no'
    );
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  setViewport();
  var newBase = 100; //       100  

  //   Rem
  function setRem() {
    var visualView = Math.min(
      docEl.getBoundingClientRect().width,
      lib.maxWidth
    );
    newBase = (100 * visualView) / lib.desinWidth;
    docEl.style.fontSize = newBase + 'px';
  }

  var tid;
  lib.desinWidth = 640;
  lib.baseFont = 18;
  lib.maxWidth = 540;
  lib.init = function() {
    win.addEventListener(
      'resize',
      function() {
        clearTimeout(tid);
        tid = setTimeout(setRem, 300);
      },
      false
    );
    win.addEventListener(
      'pageshow',
      function(e) {
        if (e.persisted) {
          clearTimeout(tid);
          tid = setTimeout(setRem, 300);
        }
      },
      false
    );
    if (doc.readyState === 'complete') {
      doc.body.style.fontSize = lib.baseFont * dpr + 'px';
    } else {
      doc.addEventListener(
        'DOMContentLoaded',
        function(e) {
          doc.body.style.fontSize = lib.baseFont * dpr + 'px';
        },
        false
      );
    }
    setRem();
    docEl.setAttribute('data-dpr', dpr);
  };
})(window, window['adaptive'] || (window['adaptive'] = {}));
window['adaptive'].desinWidth = 750;
window['adaptive'].baseFont = 12;
window['adaptive'].maxWidth = 540;
window['adaptive'].init();

以上のコードは、設計原稿750pxを基準とし、非750pxであれば、実際のページでは750に変換してから変換します.

100px  = 1rem;
750px = 7.5rem;

このjsコードをmobile-adaption.jsと名付けてページに導入すると、pxをremに変換して適応レイアウトを実現することができます.
異なる設備の中で一致を保つには、各社がモバイル端末に対して独自の基準を持っており、 flexible.jsを適切に使用することもできます.
手回しがちょうどよい参照

手を取ってvuepressでウェブサイトを構築することを教えます

Js面接-筆記試験の本題-Jsの中の事件の循環のメカニズムを教えてください