大屏适配方案

 1.获取大屏展示内容盒子的DOM元素

const screenRef = ref()

2.定义屏幕缩放比例

function getScale(width = 1920, height = 1080) {

    const wh = window.innerHeight / height; //获取当前视口的比例

    const ww = window.innerWidth / width;

    return ww < wh ? ww : wh;

}

3.当屏幕发生变化的时候调整窗口的大小

onMounted(() => {

    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`

})

window.onresize = () => {

    screenRef.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`

}

4.样式代码

<div class="app-container">

        <div class="screen" ref="screenRef">

            <div class="screen-header">头部</div>

            <div class="screen-body">身体</div>

        </div>

    </div>

<style lang="scss" scoped>

.app-container {

    width: 100vw;

    height: 100vh;

    background: url(../../assets/2000.jpg) no-repeat;

    background-size: cover;

}

.screen {

    width: 1920px;

    height: 1080px;

    background-color: red;

    position: fixed;

    left: 50%;

    top: 50%;

    transform-origin: left top;

}

</style>