vue大屏

创建组件  ScreenAdapter

<template>

    <div class="screen-adapter">

        <div class="z-index">

            <div class="content-wrap" :style="style">

                <slot></slot>

            </div>

        </div>

    </div>

</template>

<script>

export default {

    name: 'ScreenAdapter',

    props: {

        w: { // 设计图尺寸宽

            type: Number,

            default: 1920,

        },

        h: { // 设计图尺寸高

            type: Number,

            default: 1080,

        },

    },

    data() {

        return {

            style: {

                width: `${this.w}px`,

                height: `${this.h}px`,

                transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中

            },

        };

    },

    mounted() {

        this.setScale();

        this.onresize = this.debounce(() => this.setScale(), 100);

        window.addEventListener('resize', this.onresize);

    },

    methods: {

        // 防抖

        debounce(fn, t) {

            const delay = t || 500;

            let timer;

            // eslint-disable-next-line func-names

            return function () {

                // eslint-disable-next-line prefer-rest-params

                const args = arguments;

                if (timer) {

                    clearTimeout(timer);

                }

                const context = this;

                timer = setTimeout(() => {

                    timer = null;

                    fn.apply(context, args);

                }, delay);

            };

        },

        // 获取缩放比例

        getScale() {

            const w = window.innerWidth / this.w;

            const h = window.innerHeight / this.h;

            return w < h ? w : h;

            // return {w, h};

        },

        // 设置缩放比例

        setScale() {

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

        },

    },

    beforeDestroy() {

        window.removeEventListener('resize', this.onresize);

    },

}

</script>

<style lang='scss' scoped>

.screen-adapter {

    width: 100vw;

    min-height: 100%;

    height: 100vh;

    overflow: hidden;

    // 添加一个背景色，在适配不成功（上下或者左右有空白时）这个背景色和大屏主题色相似，一定程度上看不出来；该方案只在适配要求不高(只做常规屏幕适配)情况下适用

    background-image: url(../../../assets/screen/u1.jpg);

    background-size: cover;

    .z-index {

        background-color: rgba(7, 26, 67, 0.8);

        z-index: 9;

        height: 100vh;

        overflow: hidden;

        .content-wrap {

            transform-origin: 0 0;

            position: absolute;

            // width: 100vw !important;

            top: 50%;

            left: 50%;

        }

    }

 

}

</style>

2.引入组件

import ScreenAdapter from '@/views/components/ScreenAdapter';

使用

<template>

    <screen-adapter>

   

    </screen-adapter>

</template>

正常用px写就行，然后放大缩小整个屏幕比例是不会变的