使用rem并且实现自适应

在App.vue文件中的mounted生命周期中加入下面一句话

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
    );
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容