【工作笔记】不明确最终像素比的情况下的自适应大屏解决方案

我也不知道为什么会不明确.....随手一下，方便下次抄

需求：大屏需铺满屏幕，不能出现滚动条，白边，布局错乱等问题。

设计稿为1920*1080

方案1：利用transform的scale直接缩放。

整一个缩放组件

<template>
  <div class="screen-adapter" id="screenAdapter" :style="style">
    <slot />
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
// 入参为设计稿宽高
const props = defineProps({
  width: {
    type: String,
    default: "1920",
  },
  height: {
    type: String,
    default: "1080",
  },
});
const style = reactive({
  width: props.width + "px",
  height: props.height + "px",
  transform: "scale(1) ",
});
const Debounce = (fn, t) => {
  const delay = t || 500;
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    c