Vue 设置 postcss-px2rem

"vue": "2.6.12",
@vue/cli 4.5.13
npm install postcss-px2rem

module.exports = {
css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  }
}
效果：

 不同比例分辨率rem：

// 设置 rem 函数
(function (designWidth, minWidth) {<!-- -->
  var doc = document,
    win = window,
    docEl = document.documentElement,
    remStyle = document.createElement("style"),
    tid;

  function refreshRem(screenRatioByDesign = 16 / 9) {<!-- -->
    console.log("refreshRem")
    var docEle = document.documentElement
    var screenRatio = docEle.clientWidth / docEle.clientHeight;
    var bodyEl = document.body
    var designWidth = 1920
    var fontSize = (
      screenRatio > screenRatioByDesign
        ? (screenRatioByDesign / screenRatio)
        : 1
    ) * docEle.clientWidth * 100 / designWidth;
    docEle.style.fontSize = fontSize.toFixed(3) + "px";
  }

  if (docEl.firstElementChild) {<!-- -->
    docEl.firstElementChild.appendChild(remStyle);
  } else {<!-- -->
    var wrap = doc.createElement("div");
    wrap.appendChild(remStyle);
    doc.write(wrap.innerHTML);
    wrap = null;
  }
  //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
  refreshRem();
  win.addEventListener("resize", function () {<!-- -->
    clearTimeout(tid); //防止执行两次
    tid = setTimeout(refreshRem, 300);
  }, false);

  win.addEventListener("pageshow", function (e) {<!-- -->
    if (e.persisted) {<!-- --> // 浏览器后退的时候重新计算
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);

  if (doc.readyState === "complete") {<!-- -->
    // doc.documentElement.style.fontSize = "100px";
  } else {<!-- -->
    doc.addEventListener("DOMContentLoaded", function (e) {<!-- -->
      // doc.documentElement.style.fontSize = "100px";
    }, false);
  }
})(1920, 1024);
https://www.codenong.com/cs109582687/

方法1

// (function (doc, win) {
//   var docEl = doc.documentElement,
//     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
//     recalc = function () {
//       var clientWidth = docEl.clientWidth;
//       console.log(clientWidth)
//       if (!clientWidth) return;
//       if (clientWidth >= 1920) {
//         docEl.style.fontSize = '100px';
//       } else {
//         docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
//       }
//     };
//   if (!doc.addEventListener) return;
//   win.addEventListener(resizeEvt, recalc, false);
//   doc.addEventListener('DOMContentLoaded', recalc, false);
// })(document, window);
方法2
// export function resetRem() {
//   let html = document.documentElement;
//   let clientWidth = html.clientWidth;
//   if (!clientWidth) return;
//   if (clientWidth >= 1920) {
//     html.style.fontSize = '100px';
//   } else {
//     html.style.fontSize = 100 * (clientWidth / 1920) + 'px';
//   }
//   // 监听 window 的 resize 事件．在浏览器窗口变化时再设置下区域高度．
//   window.onresize = () => {
//     let html = document.documentElement;
//     let clientWidth = html.clientWidth;
//     if (clientWidth >= 1920) {
//       html.style.fontSize = '100px';
//     } else {
//       html.style.fontSize = 100 * (clientWidth / 1920) + 'px';
//     }
//   };
// }