使用重绘来自定义大屏的自适应(1920,1080)

效果图

然后可以折叠按f11全屏显示

utils

在utils文件夹创建useDraw.js文件如下所示
useDraw.js

export default function useIndex(appRef) {
    
    
    // * 默认缩放值
    const scale = {
    
    
        width: '1',
        height: '1'
    }
    // * 设计稿尺寸（px）
    const baseWidth = 1920
    const baseHeight = 1080

    // * 需保持的比例（默认1.77778）
    const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
    const calcRate = () => {
    
    
        // 当前宽高比
        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%)`
            }
        }
    }

    const resize = () => {
    
    
        setTimeout(() => {
    
    
            calcRate()
        }, 200)
    }

    // 改变窗口大小重新绘制
    const windowDraw = () => {
    
    
        window.addEventListener('resize', resize)
    }

    return {
    
    
        calcRate,
        windowDraw
    }
}

app.js

//这些是对于2边的颜色
#app,html,body{
    
    
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color:#020308;
}
//这个类名要与页面的类名保持一致
 .ds-container {
    
    
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}

页面引用

!<template>
  <div class="ds-container" ref="appRef">
   <div>121212</div>
  </div>
</template>
<script>
import useIndex from "@/utils/useDraw";
export default {
    
    
  mounted(){
    
    
    // *适配处理
    const {
    
     calcRate,windowDraw } = useIndex(this.$refs.appRef);
    calcRate();
    windowDraw();
  }
}
</script>
<style lang="scss" scoped>
</style>