vue2、vue3适配大屏。分辨率变化，样式不变

一、vue3适配大屏的，创建一个叫 useDraw.js

export default function () {
  const scale = {
    width: '1',
    height: '1',
  }
  const baseWidth = 1920
  const baseHeight = 1080
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  let drawTiming = $ref(0)
  let appRef = null
  const calcRate = () => {
    if (!appRef) {
      appRef = document.getElementById('appRef')
    }
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = (window.innerWidth / 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%)`
      }
    }
  }
  const resize = () => {
    clearTimeout(drawTiming)
    drawTiming = setTimeout(() => {
      calcRate()
    }, 200)
  }

  onMounted(() => {
    calcRate()
    window.addEventListener('resize', resize)

    // 临时解决有滚动条的问题
    const app = document.getElementById('app').children[0]

    if (app) {
      app.style.width = '99vw'

      setTimeout(() => {
        app.style.width = '100vw'
      })
    }
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
  })
}

 在vue3中这样使用

<script setup>
import useDraw from "./utils/useDraw";
// 大屏适配
useDraw();
</script>

 

二、vue2适配大屏的，创建一个叫 useDraw.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.innerWidth / 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)
    }
  },
}

 在vue2项目中引用

<script>
import drawMixin from "./utils/useDraw.js";
export default {
  mixins: [useDraw],
}
</script>