大屏适配方法一（使用scale）

当前是vue2

<template>
  <div id="container">
     <div id="screen" ref="screen" style="color:#fff ;">
      666666666666666666666666666666666666
     </div>
  </div>
</template>

<script>

export default {
 name: 'App',
 mounted () {
  let that=this
  // 界面一打开就获取当前的screen元素
  that.setScale()
  // 如何实现窗口的改变事件---因为次数是箭头函数，所以无法使用this，故用that转化一下
  window.addEventListener('resize', () => {
    that.setScale()
  })
 },
 methods:{
   // 获取当前的缩放比例是多少，取较小的一个值
  getScale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    return ww < wh ? ww : wh;
},
setScale(){
  let res=this.getScale()
  this.$refs.screen.style.transform =  `scale(${res}) translate(-50%,-50%)`
}
 }

}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#container{
  width: 100vw;
  height:100vh;
  background:url('./assets/images/bg.png') no-repeat;
  background-size: cover;
  #screen {
  position: fixed;
  width: 1920px;
  height: 1080px;
  left:50%;
  top:50%;
  background-color: aqua;
  transform-origin: left top;
}
}

</style>

实现的基本思路是：

screen主体部分以左上角为中心，先向右下角移动50% 50%（水平垂直）

在根据页面缩放比例，做scale伸缩变化，再向左上角移动50% 50%（水平垂直方向）

伸缩的具体scale取宽度以及高度深度的最小值

super easy 原始版，后续再来优化它吧