大屏适配方案

最近公司一直都在做大屏项目，然而根据不同的屏幕大小不同样式总会发生变化，废话不多说给大家分享一下大屏适配的解决方案直接上代码

根据设计图宽高都能直接写PX了不用担心适配问题 是不是很方便！

<template>
  <div class="page-adapter-wrap" ref="pageAdapter" :style="{ width: width + 'px', height: height + 'px' }">
    <slot></slot>
  </div>
</template>

<script setup>
  const width = ref(1920);
  const height = ref(1080);
  const pageAdapter = ref(null);
  const setScale = () => {
    const bodyWidth = document.documentElement.clientWidth;
    const bodyHeight = document.documentElement.clientHeight;
    const scaleX = bodyWidth / width.value;
    const scaleY = bodyHeight / height.value;
    if (pageAdapter.value) {
      pageAdapter.value.style.transform = `scale(${scaleX},${scaleY})`;
    }
  };
  onMounted(() => {
    setScale();
    window.addEventListener('resize', setScale);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', setScale);
  });
</script>

<style lang="scss" scoped>
  .page-adapter-wrap {
    position: fixed;
    transform-origin: left top;
  }
</style>