大屏适用性比较大，后台系统不推荐

抽组件，scaleScreen

javascript"><template><divid="screen":style="{width: `${style.width}px`,height: `${style.height}px`,transform: `${style.transform}`,}"><slot ></slot></div>
</template><script>
export default {name: "scaleScreen",props: {},data() {return {style: {width: "1920",height: "1080",transform: "scaleY(1) scaleX(1) translate(-50%, -50%)",},};},methods: {getScale() {const w = window.innerWidth / this.style.width;const h = window.innerHeight / this.style.height;return { x: w, y: h };},setScale() {const scale = this.getScale();this.style.transform ="scaleY(" + scale.y + ") scaleX(" + scale.x + ") translate(-50%, -50%)";},},mounted() {const that = this;that.setScale();/* 窗口改变事件 */window.addEventListener("resize", function () {console.log("窗口发生变化");that.setScale();});},
};
</script><style lang="scss" scoped>
#screen {z-index: 100;transform-origin: 0 0;position: fixed;left: 50%;top: 50%;transition: 0.3s;
}
</style>

使用时，用组件包裹就可以

<template><scale-screen></scale-screen>
</template>