vue 根据缩放适配大屏

根据scale缩放适配大屏

// 这种适配只适合 1920*1080 和3840 * 2160的屏幕如果是超宽屏幕就往下看
// 不多逼逼 直接上代码 

<template>
  <div class="home" id="home" ref="home"></div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    f() {
      var w = window.innerWidth; //获取窗口宽度
      var h = window.innerHeight;//获取窗口高度
      const w_w = this.$refs.home.offsetWidth;//获取元素宽度
      const h_h = this.$refs.home.offsetHeight;//获取元素高度
      let num = 0;
      w / h > w_w / h_h ? (num = h / h_h) : (num = w / w_w); 
      // 窗口宽/窗口高>元素宽/元素高
      home.style.transform = `translate(-50%, -50%) scale(${num})`;
    },
  },
  mounted() {
    this.f();
    window.addEventListener("resize", this.f);
  },
};
</script>

<style scoped>
.home {
  /* width: 7680px; */
  /* height: 2160px; */
  width: 1920px;
  height: 1080px;
  background-color: rgb(16, 179, 111);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 1s;
}
</style>

根据scale缩放 超宽屏幕适配方案

<template>
  <div
    id="screen"
    :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`
    }"
  >
   <div class="box"></div>
  </div>
</template>
 
<script>
export default {
  name: 'ScaleBox',
  props: {},
  data () {
    return {
      style: {
        width: '7680',
        height: '2160',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },
  methods: {
    getScale () {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale () {
      const scale = this.getScale()
      this.style.transform =
        'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    }
  },
  mounted () {
    const that = this
    that.setScale()
    /* 窗口改变事件 */
    window.addEventListener('resize', function () {
      console.log('窗口发生变化')
      that.setScale()
    })
  }
}
</script>
 
<style scoped>
#screen {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
.box {
  width: 100%;
  height: 100%;
  background-color: green;

}
</style>