大屏vw和vh适配sass计算

// 设计图尺寸 1920*1080 div宽高 300*200
div宽 = (300px / 1920px ) * 100vw
div高 = (200px / 1080px ) * 100vh

@use "sass:math";
//设计稿的宽度
$designWidth: 3840;
//设计稿的高度
$designHeight: 2160;

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

//px转为vh的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
.headerTit {
 	width: vw(140);
    height: vh(140);
    font-size: vh(18);
    margin-left: vw(10);
    margin-top: vh(10);
    border: vh(2) solid red;
}

安装

npm i sass sass-loader --save-dev

在 vite.config.ts中配置 scss的全局变量使用,additionalData引入对应的全局变量配置文件路径

 // scss全局变量配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
      // 存放变量的文件和样式文件需要分开，main.ts中引入的文件不可以是这里文件
        additionalData: '@use "@/styles/variable.scss" as *;'
      },
    }
  }
});