大屏项目居中布局

实现整个项目页面会根据不同显示屏的宽高居中布局

<template>
    <div class="screen-box">
        <div class="layout">
            <img src="@img/screen-layout.png" alt />
        </div>
    </div>
</template>

<script>
export default {
    name: 'screen',
    components: {},
    data() {
        return {}
    },
    mounted() {
        this.refreshScale()
    },
    methods: {
        //动态改变尺寸
        refreshScale() {
            let baseWidth = document.documentElement.clientWidth
            let baseHeight = document.documentElement.clientHeight
            // console.log('size', baseWidth, baseHeight)
            let appStyle = document.querySelector('.layout').style
            let realRatio = baseWidth / baseHeight
            let designRatio = 16 / 9
            let scaleRate = baseWidth / 1920  // 设计稿宽度
            if (realRatio > designRatio) {
                scaleRate = baseHeight / 1080  // 设计稿高度
            }
            appStyle.transformOrigin = '0 0'
            appStyle.transform = `scale(${scaleRate}) translate(-50%, -50%)`
            appStyle.position = 'fixed'
            appStyle.top = '50%'
            appStyle.left = '50%'
        }
    }
}
</script>

<style scoped lang="scss">
.screen-box {
    width: 100%;
    height: 100%;
    background-color: rgb(8,16,43);
    .layout {
        width: 1920px;
        height: 1080px;

        > img {
            width: 1920px;
            height: 1080px;
        }
    }
}
</style>

这里我没有写具体内容布局就先使用一张图片代替，具体页面内容就是写到.layout的盒子里，页面的居中布局是利用css样式的移动和缩放来实现的，儿布局盒子的宽高是固定的，所以不需要考虑不同显示屏所展示的页面大小、字体大小等不一样问题。

效果：