scale实现按比例缩放 ，以 1920*1080为例子

1.页面可以按照正常的写，px啥的，不需要用 vm,vw,em这些，反正就按你正常的写；

2.写这个组件scale组件

放的位置嘛随意，到时候引用的时候注意路径就行。

下面是 index.js的代码，根据实际情况再调整调整2.在页面引入使用

组件代码：

<template>
    <div
      class="ScaleBox"
      ref="ScaleBox"
      :style="{
        width: width + 'px',
        height: height + 'px',
        //  backgroundImage: `url(${require('@/../public/static/images/operation/bg3.jpg')})`,
        // backgroundRepeat: 'no-repeat',
        // backgroundSize: '100% 100%',
      }"
    >
      <slot></slot>
    </div>
  </template>
   
  <script>
  export default {
    name: "ScaleBox",
    props: {},
    data() {
      return {
        scale: 0,
        width: 1920,
        height: 1080,
      };
    },
    mounted() {
      this.setScale();
      window.addEventListener("resize", this.debounce(this.setScale));
    },
    methods: {
      getScale() {
        const { width, height } = this;
  const availableWidth = window.innerWidth ; // 根据实际情况减去侧边栏的宽度
  const availableHeight = window.innerHeight; // 根据实际情况减去导航栏的高度
  const wh = availableHeight / height;
  const ww = availableWidth / width;
  return ww < wh ? ww : wh;
      },
      setScale() {
        // 获取到缩放比例，设置它
        this.scale = this.getScale();
        if (this.$refs.ScaleBox) {
          this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
        }
      },
      debounce(fn, delay) {
        const delays = delay || 500;
        let timer;
        return function () {
          const th = this;
          const args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
          }, delays);
        };
      },
    },
  };
  </script>
   
  <style lang="scss">
  #ScaleBox {
    --scale: 1;
  }
  .ScaleBox {
    position: absolute;
    transform: scale(var(--scale)) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    z-index: 999;
    // background: rgba(255, 0, 0, 0.3);
  }
  </style>