VUE3大屏自适应布局的几种实现方式

.full-screen {
  width: vw(1920);
  height: vh(1080);
  padding: vh(5) vw(5) vh(5) vw(5);
}

.header-title {
  font-size: vw(40);
  line-height: vh(80);
}

@use "sass:math";

$designWidth: 1920;
$designHeight: 1080;

@function vw($px){
    @return math.div($px, $designWidth) * 100vw;
}

@function vh($px){
    @return math.div($px, $designHeight) * 100vh;
}

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/styles/utils.scss";'
    },
  },
}

<template>
  <div class="container">...</div>
</template>

<style scoped lang="scss">
.container {
  width: vw(300); // 直接使用，无需导入
  height: vh(200); // 直接使用，无需导入
  padding: vh(10) vw(20);
}
</style>

.header {
  width: vw(1900); // 转换为约 98.96vw (1900/1920*100)
  height: vh(100); // 转换为约 9.26vh (100/1080*100)
  font-size: vh(40); // 转换为约 3.7vh
}

.content-box {
  margin: vh(5) 0;
  padding: vh(5) vw(5) vh(10) vw(5);
}

<div class="full-screen">
  <div class="header">...</div>
  <div class="center">...</div>
  <div class="footer">...</div>
</div>

.full-screen {
  display: flex;
  flex-direction: column;
}

.center {
  display: flex;
  // flex-direction: column;
}

window.addEventListener('resize', () => {
  myChart.resize();
});

let fullScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
};

window.addEventListener('wheel', function(event) {
  if (event.ctrlKey || event.metaKey) {
    if (event.deltaY > 0) {
      document.body.style.zoom = (parseFloat(getComputedStyle(document.body).zoom) || 1) * 1.1;
    }
    if (event.deltaY < 0) {
      document.body.style.zoom = (parseFloat(getComputedStyle(document.body).zoom) || 1) / 1.1;
    }
  }
});

<el-row class="header" :gutter="20">
  <el-col :span="7" class="header-time">...</el-col>
  <el-col :span="10" class="header-title">...</el-col>
  <el-col :span="6">...</el-col>
</el-row>