rem实现管理端适应大小屏

窗口正常大小时

窗口缩小时候的效果:

在App.vue界面中加上这么一句代码

mounted() {
    const designW = 1440; //设计稿宽
    const fontRate = 12;

    setTimeout(() => {
      //适配
      document.getElementsByTagName("html")[0].style.fontSize =
        (document.body.offsetWidth / designW) * fontRate + "px";
      document.getElementsByTagName("body")[0].style.fontSize =
        (document.body.offsetWidth / designW) * fontRate + "px";
    }, 100);

    //监测窗口大小变化
    window.addEventListener(
      "onorientationchange" in window ? "orientationchange" : "resize",
      function () {
        document.getElementsByTagName("html")[0].style.fontSize =
          (document.body.offsetWidth / designW) * fontRate + "px";
        document.getElementsByTagName("body")[0].style.fontSize =
          (document.body.offsetWidth / designW) * fontRate + "px";
      },
      false
    );
  }

所有涉及到px的单位改为 除以多少是根据当前电脑屏幕/设计稿宽度得出的 * 设计稿比例 例如:我电脑1920的宽度,设计稿1440,设计稿比例:12所以等于(1920/1440) *12

padding-left: calc(30 / 16 * 1rem);

上面就实现了每台电脑都显示对应比例的效果