Vue中大屏适配和局部适配的方案总结

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
};

// * 设计稿尺寸（px）
// const baseWidth = document.body.clientWidth;
// const baseHeight = document.body.clientHeight;
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.calcRate();
    }, 200);
    window.addEventListener('resize', this.resize);
  },
  created() {},
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    calcRate() {
      const appRef = this.$refs['appRef'];
      if (!appRef) return;
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5),
      );
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = (
            (window.innerHeight * baseProportion) /
            baseWidth
          ).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        } else {
          // 表示更高
          scale.height = (
            window.innerWidth /
            baseProportion /
            baseHeight
          ).toFixed(5);
          scale.width = (window.innerWidth / baseWidth).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 200);
    },
  },
};

<template>
  <div ref="appRef" class="wrapper">
    <div class="home-canvas">
   		内容
    </div>
  </div>
</template>

<script>
import screenMinxi from '@/utils/screenmixin';
export default {
  mixins: [screenMinxi],
};
</script>

<style lang="scss" scoped>
// 必需写宽高,如有单位转换在style中写
.wrapper{
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top; /* 缩放基点为左上角 */
  overflow: hidden;
}
</style>

export const scaleMixin = {
  methods: {
    // 计算缩放比例
    getScaleRatio() {
      const baseWidth = 1920; // 基准宽度
      const baseHeight = 1080; // 基准高度
      const screenWidth = window.innerWidth; // 屏幕宽度
      const screenHeight = window.innerHeight; // 屏幕高度
      const ratioX = screenWidth / baseWidth;
      const ratioY = screenHeight / baseHeight;
      return Math.min(ratioX, ratioY); // 取最小比例作为缩放比例
    },
  },
  mounted() {
    // 监听窗口变化，重新计算缩放比例
    window.addEventListener('resize', () => {
      const scaleRatio = this.getScaleRatio();
      this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
    });
    // 初始化缩放比例
    const scaleRatio = this.getScaleRatio();
    this.$refs.wrapper.style.transform = `scale(${scaleRatio})`;
  },
};

import { scaleMixin } from './mixins';
mixins: [scaleMixin],

 <div class="canvas-wrapper wrapper" style="width:1600px;heibht:890px;" ref="wrapper" >
      <div class="">内容</div>
 </div>

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: left top; /* 缩放基点为左上角 */
  transform: scale(1); /* 初始化缩放比例 */
}