【自适应缩放】vue根据屏幕大小自适应宽高缩放的方法

根据屏幕大小的变化自动缩放元素的宽高，达到可以适应任何屏幕大小的效果。
这边通过一个mixins.js文件混入到组件内直接使用就行，只需要改一下ref的名字

示例结构

这里只需要看下我的结构大概示例和引入mixins文件，

<template>
  <div style="width:100%;height:100%;position: relative">
    <div class="box" ref="zoom">
      <p>测试11</p>
      <p>测试22</p>
      <p>测试33</p>
    </div>
  </div>
</template>

<script>
//引入自适应缩放文件
import drawMixin from "@/utils/drawMixin.js";
export default {
  //注册mixin
  mixins: [drawMixin],
};
</script>

<style scoped>
/* 子集盒子的class */
.box {
  /*父级宽100vw，高100vh。子盒子宽高1920*1080可以做大屏显示居中缩放 */
  width: 1500px;
  height: 800px;
  /* 根据父级定位，配合transform用来居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: red;
  color: #fff;
  /* 更改转换元素的位置 */
  transform-origin: left top;
  /* 超出隐藏 */
  overflow: hidden;
}
</style>

mixin.js文件

这里就直接整个代码原封不动复制过去，找个地方创建一个js文件。名字自己取一下，然后你需要的组件内mixins引入就能用了。

注意点：calcRate 方法内的$refs是绑定你的组件内缩放的元素的，名字注意改一下。

如果你需要缩放的是整个页面，那就把最外层的div取个ref名字写在这里就可以了。

// 屏幕适配 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)
    }
  },
}