vue项目中使用rem,在入口文件添加内容操作

<script>
   window.onload = function () {
  var setRem = function () {
    // UI设计稿的宽度
    var uiWidth = 1200;

    // 移动端屏幕宽度
    var winWidth = document.documentElement.clientWidth;

    // 比率
    var rate = winWidth / uiWidth;

    // 设置html元素的字体大小
    document.documentElement.style.fontSize = rate  20 + "px"
  };

  setRem();

  window.onresize = function () {
    setRem();
  }
}
</script>

(function (doc, win) {
  let fn = () => {
   let docEl = doc.documentElement,
    clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   docEl.style.fontSize = 16  (clientWidth / 1920) + 'px';
  }
  if (!doc.addEventListener) return;
  win.addEventListener('resize', fn);
  doc.addEventListener('DOMContentLoaded', fn);
 })(document, window);

const setHtmlFontSize = () => {
 const htmlDom = document.getElementsByTagName('html')[0];
 let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
 if (htmlWidth >= 750) {
  htmlWidth = 750;
 }
 if (htmlWidth <= 320) {
  htmlWidth = 320;
 }
 htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();

/ 编译前 /
.selector {
  width: 150px;
  height: 64px; /px/
  font-size: 28px; /px/
  border: 1px solid #ddd; /no/
}

/ 编译后 /
.selector {
  width: 2rem;
  border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
  height: 32px;
  font-size: 14px;
}
[data-dpr="2"] .selector {
  height: 64px;
  font-size: 28px;
}
[data-dpr="3"] .selector {
  height: 96px;
  font-size: 42px;
}