vue 大屏自定义rem 监听页面宽度resize

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      screenWidth: document.body.clientWidth
    };
  },
  components: {
    Map
  },
  created() {
    this.resetSize();
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
  },
  methods: {
    resetSize() {
      let designSize = 1920; //设计图尺寸
      let html = document.documentElement;
      let wW = html.clientWidth; //窗口宽度
      let rem = (wW * 100) / designSize;
      document.documentElement.style.fontSize = rem + "px";
    }
  },
  watch: {
    screenWidth(val) {
      this.screenWidth = val;
      this.resetSize();
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  font-size: 0.15rem;
}
.flex-between {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.flex-around {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.flow-left {
  float: left;
}
.flow-right {
  float: right;
}
</style>