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

<script>
export default {
  data: () => ({}),
  methods: {
    windowResize() {
      const remSize = 20; // 1rem === 20px
      const rect = document.body.getBoundingClientRect();
      const fontSize = (Math.min(rect.width, rect.height) / 720) * remSize;

      document.documentElement.style.fontSize = fontSize + "px";
    },
    initRem() {
      this.windowResize();
      window.addEventListener("resize", this.windowResize, false);
    }
  },
  created() {
    this.initRem();
  }
};
</script>
