大屏适配

// 使用 scss 的 math 函数
// https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";

// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;

// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}

// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}

// 需要在vue.config.js里配置
module.exports = defineConfig({
 // ...
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @use "~@/assets/styles/index.scss" as *;
        `
      }
    }
  },
// ...
});

// 使用
div {
  width: vw(300);
  height: vh(100);
  font-size: vh(16);
  margin-left: vw(10);
  margin-top: vh(10);
  border: vh(2) solid red;
}

参考地址：https://blog.csdn.net/m0_63710734/article/details/139881948