vue项目等比例缩放页面

 场景假设：我们以设计稿 1920px*1080px为例，但是现在我们的屏幕没有1920*1080，或者浏览器没有最大化，就占了屏幕的一半，这时候很可能浏览器长宽比连16:9都不是，我们可以宽度做基准，高度来适应宽度（高度为基准，宽度适应高度也可以，看场景和具体需要）。设计稿的宽度是1920px，而浏览器可视宽度是 window.innerWidth，我们需要在浏览器可视范围内自适应缩放容器，也就是在 window.innerWidth 的宽度中来显示 1920px的东西，那我们的 缩放比例 就是 window.innerWidth / 1920。

1.首先我们需要在 utils 文件夹下新增 drawMixin.js 。 如果没有 utils 文件夹，在 src 下新建 utils 文件夹再进行 drawMixin.js 文件新建。

drawMixin.js

// 屏幕适配 mixin 函数

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

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null,
    }
  },
  mounted() {
    //加载后先计算一遍缩放比例
    this.calcRate()
    //生成一个监听器：窗口发生变化从新计算计算一遍缩放比例
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate() {
      //拿到整个页面元素
      const appRef = this.$refs['zoom']
      //如果没有值就结束
      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)
    },
  },
}

 2.修改 App.vue 内容

 一定要给页面元素新增 ref ，两个地方 ref 相同即可。

通过 minxins 使用 drawMixin  并且设置页面容器宽高

App.vue

<template>
  <div id="app" ref="zoom">
    <router-view />
  </div>
</template>

<script>
import drawMixin from '@/utils/drawMixin.js'
export default {
  name: 'App',

  mixins: [drawMixin],
  data() {
    return {}
  },
  mounted() {},

  methods: {},
}
</script>

<style lang="scss">
#app {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}
</style>

这样设置之后，基本就大功告成了！

优化在非全屏设置的屏幕比例在背景颜色为白色的问题 

设置 body 背景颜色为 rgb(24, 25, 35); 

解决使用element弹框，发现弹窗没有进行等比例缩放问题

只需要将 modal-append-to-body 和 append-to-body 属性设置为 false 即可解决