transform scale 屏幕适配

根据宽度适配

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

let baseWidth = 1920;
let baseHeight = 1080;
let layoutRef = ref(null);

let resize = () => {
    let scaleX = window.innerWidth / baseWidth;
    let scaleY = window.innerHeight / baseHeight;
    let scale = Math.min(scaleX, scaleY);
    layoutRef.value.style.transform = `scaleX(${scale}) scaleY(${scale}) translateX(-50%) translateY(-50%)`;
}

onMounted(() => {
    resize();
    window.addEventListener('resize', resize);
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', resize);
})
</script>
<template>
    <div class="layout" ref="layoutRef" :style="{ width: baseWidth + 'px', height: baseHeight + 'px' }"></div>
</template>
<style lang="scss" scoped>
.layout {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    background-color: #000;
}
</style>