vue 大屏自适应缩放方案

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['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)
          // console.log(scale.width, scale.height, '放大')
          // 整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          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)
          // console.log(scale.width, scale.height, '缩小')
          // 整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${scale.width}, ${
            scale.height
          }) translate(-50%, -50%)`
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  }
}

APP.vue 使用

<template>
  <div id="app" ref="appRef">
    <router-view :key="$route.path"></router-view>
  </div>
</template>

<script>
import Index from './components/Index'
import './assets/style/ant_reset.css'
import './assets/style/public.css'
import './assets/font/iconfont.css'
// 滚动条的样式
// import './assets/style/scoll.css'

import drawMixin from './mixin/drawMixin' // 自适应缩放
export default {
  name: 'App',
  components: {
    Index
  },
  mixins: [drawMixin],
  data() {
    return {
      timer: 0
    }
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style lang="less">
#app {
  // width: 5760px;
  // height: 3240px;

  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden; /*必要属性，否则宽度在windowresize的时候获取会减去滚动条的宽度*/
}
* {
  position: relative;
  box-sizing: border-box;
}
.base-card + .base-card {
  margin-top: 24px;
}

.dv-scroll-board {
  font-size: 14px;
  color: #f6f9fe;

  .header-item,
  .ceil {
    font-family: @fontFamilyMY;
    font-size: 14px;
    color: #f6f9fe;
  }
}
</style>