大屏自适应，响应式布局，亲测有效

超级罗伯特2025-11-14 10:25

前言：只要是驾驶舱项目或者项目中都会用到自适应模块，切不能让各模块错乱分布，核心代码就这几行，拿去用吧

javascript 复制代码

// App.vue
<template>
//---------
    <div id="integration" class="pageContent" :style="integrationStyle">
           <RouterView />
    </div>
//---------
</template>
<script lang="ts" setup>
    // 修改 integrationStyle 的定义
    const integrationStyle = ref({});

    // 修改 resizeMain 函数
    const resizeMain = () => {
  
    // 直接获取当前窗口尺寸
    const width = window.innerWidth;
    const height = window.innerHeight;
  
    let [defWidth, defHeight] = [0, 0];
    const w = (width - defWidth) / 1920;
    const h = (height - defHeight) / 1080;
  
    // 直接赋值
    integrationStyle.value = {
        transform: `scaleY(${h}) scaleX(${w})`,
        width: '1920px',
        height: '1080px'
      };
    };
    // 确保 DOM 加载完成后初始化一次
    onMounted(() => {
      resizeMain();
      window.addEventListener('resize', resizeMain);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeMain);
    });


</script>
<style scoped lang="less">
  #integration {
	transform-origin: left top;
	position: fixed;
	left: 0;
	top: 0;
  }
</style>