方法一：缩放（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 = reactive({
  width: 1920, // 视口的初始宽度
  height: 1080, // 视口的初始高度
  transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)', // 初始变换样式
});

// 生命周期钩子，在组件挂载时设置初始缩放，并设置窗口调整大小时的处理函数
onMounted(() => {
  setScale(); // 组件挂载时设置缩放
  window.addEventListener('resize', setScale); // 监听窗口调整大小事件
});
// 在组件销毁时移除窗口调整大小事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('resize', setScale); // 移除窗口调整大小事件监听器
});

// 根据窗口大小计算缩放比例
const getScale = () => {
  const w = window.innerWidth / styleTransform.width; // 计算宽度缩放比例
  const h = window.innerHeight / styleTransform.height; // 计算高度缩放比例
  return {x: w, y: h};
};

// 根据计算的缩放比例更新变换样式
const setScale = () => {
  const scale = getScale(); // 获取当前缩放比例
  styleTransform.transform = `scaleY(${scale.y}) scaleX(${scale.x}) translate(-50%, -50%)`;
};
</script>

<style scoped>
.inner {
  transform-origin: 0 0; /* 设置缩放的原点为元素的左上角 */
  position: fixed; /* 固定定位，使元素相对于视口的位置不变 */
  left: 50%; /* 将元素水平居中 */
  top: 50%; /* 将元素垂直居中 */
  transition: 0.3s; /* 为缩放样式的变化添加平滑过渡效果 */
}
</style>

2.缺点：使用此方法后页面不能有地图（cesium）等js库，形状会受缩放影响，从而影响地图的交互效果

方法二：vh，vw

1.思路：用视口高度除以设计稿高度，算出一个比值，再用比值乘以对应元素在设计稿中的高度,算出不同视口高度下该元素的高度（算宽度也是这个思路)。

2.具体实现

1）定义函数

<style lang="scss" scoped>
//vw : 相对于视口的宽度，1vw 等于视口宽度的1%（总视口宽度为100vw）
//vh : 相对于视口的高度， 1vh 等于视口高度的1%（总视口高度为100vh）
//算出当前视口高度和设计稿高度的比值
$heightRatio: calc(100vh / 1080);
//算出当前视口宽度和设计稿宽度的比值
$widthRatio: calc(100vw / 1920);

//定义函数，传入设计稿中对应元素的高度，根据比值算出不同视口高度下该元素的高度
@function heightRatio_($contentHeight) {
  //@return calc($heightRatio * $contentHeight);
}

//定义函数，传入设计稿中对应元素的宽度，根据比值算出不同视口宽度下该元素的宽度
@function widthRatio_($contentWidth) {
  @return calc($widthRatio * $contentWidth);
}

2.在编写样式代码时，引用函数

1）"横向属性"，如果需要设置一个数值，都用widthRatio_函数，比如width、margin-left、margin-right、padding-left、padding-right。

2）"纵向属性"，如果需要设置一个数值，都用heightRatio_函数，比如height、margin-top、margin-bottom、padding-top、padding-bottom、line-height；

3）字体的大小可根据情况选用这两个函数的其中一个，我一般用heightRatio_，让字体大小随着视口高度的变化而变化

4）函数中传入的参数就是该属性在设计稿中的实际数值

3.特殊说明

使用此方法需特别注意在编写样式的时候元素的布局，元素的边距，宽高的设置尤为重要，建议都按照设计稿的来，不然容易出现滚动条。