vue大屏适配（适配文字和屏幕分辨率）

第一步：创建一个js文件，这里我命名scale-adapter.js

export function resizeScale(id) {
    let dom = document.getElementById(id)
    let domW = dom.clientWidth,
        domH = dom.clientHeight
    setScale()

    window.addEventListener('resize', function () {
        setScale()
    }, false)

    function setScale() {
        let winW = window.innerWidth,
            winH = window.innerHeight,
            scaleX = winW / domW,
            scaleY = winH / domH
        dom.style.transform = 'scale(' + scaleX + ',' + scaleY + ')'
    }
}

第二步：在app.vue文件里使用

<script>
import Home from '@/views/home'
import {resizeScale} from "@/utils/scale-adapter";

export default {
  name: 'App',
  components: {Home},
  mounted() {
    resizeScale('contain')
  }
}
</script>
<template>
  <div id="contain">
    <Home/>
  </div>
</template>

最后配置一下reset.css文件

html,
body {
  overflow: hidden;
  font-family: 'iconfont', Arial, sans-serif; 
  background: #051130;
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(37, 144, 231, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(104, 203, 241, 0.7);
  -webkit-border-radius: 6px;
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#contain {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: left top;
}
div {
  box-sizing: border-box;
}