移动端 rem 自适应布局适配

方法阐述

将屏幕宽度分成10等分，比如设备宽度为 375px, 则 1rem = 37.5 px。
当设备宽度大于等于 设计稿宽度（designWidth） 时，则 1rem 始终等于 (designWidth / 10)px

项目中

使用第三方插件将 px 转换成 rem ，比如 postcss-px2rem 等
代码

/**
 * @description: rem 适配
 * @param {*} win window
 * @param {*} doc document
 * @param {*} designWidth 设计稿宽度
 */
function remApdet(win, doc, designWidth) {
  var docEl = doc.documentElement; // html 根元素
  var resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"; // 窗口改变事件-兼容处理
    
  // 设置根元素字体大小
  var setRemUnit = function() {
    var clientWidth = docEl.clientWidth;
    if (clientWidth >= designWidth) {
      docEl.style.fontSize = designWidth / 10 + "px";
    } else {
      docEl.style.fontSize = clientWidth / 10 + "px";
    }
  };

  // 补全字体大小差异
  var modifileRootRem = function() {
    var fontSize = parseFloat(docEl.style.fontSize); // 获取当前根元素字体大小
    var finalFontSize = parseFloat(win.getComputedStyle(docEl).getPropertyValue("font-size")); // 获取真实根元素字体大小
    if (finalFontSize === fontSize) return;
    docEl.style.fontSize = fontSize + (fontSize - finalFontSize) + "px";
  };

  // 调用
  setRemUnit();
  modifileRootRem();

  // 当页面重新设置大小的时候，重新触发
  window.addEventListener(
    resizeEvt,
    function() {
      setRemUnit();
      modifileRootRem();
    },
    false
  );

  // 当页面显示时触发
  window.addEventListener(
    "pageshow",
    function(e) {
      if (e.persisted) {
        setRemUnit();
        modifileRootRem();
      }
    },
    false
  );
}