vue3数据大屏解决适配方案

scale解决方案

<template>
  <div class="container">
    <div class="kb_container" ref="domRef">123</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const domRef = ref(null);

const getScale = (w = 1920, h = 1080) => {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
};

const setTransform = (element: HTMLElement) => {
  const scale = getScale();
  element.style.transform = `translate(-50%, -50%) scale(${scale})`;
};

onMounted(() => {
  if (domRef.value) {
    const element = domRef.value as HTMLElement;
    setTransform(element);

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


</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: bisque;
  position: relative;
}

.kb_container {
  width: 1920px;
  height: 1080px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>