前端大屏自适应方法总结

方法一：缩放（scale）

1.app.vue组件代码（用于app组件缩放会作用于整项目，也可以单独用于大屏页面）

<template>
  <ElConfigProvider :locale="locale">
    <div class="inner"
         :style="{
           'width': `${styleTransform.width}px`,
           'height': `${styleTransform.height}px`,
           'transform': styleTransform.transform
         }">
      <router-view></router-view>
    </div>
  </ElConfigProvider>
</template>

<script setup>
import {reactive, onMounted, onBeforeUnmount} from 'vue';
import {ElConfigProvider} from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import {useRouter} from 'vue-router';

// 定义 Element Plus 的语言环境
const locale = zhCn;
const router = useRouter();

// 使用 reactive 创建响应式对象，保存视口的宽度、高度和变换样式
const styleTransform = reacti