大屏方案 &I

vw、vh 方案

1、按照设计稿的尺寸，将px按比例计算转为vw和vh，sass转换公式

// 使用 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;
}

2、 vite配置sass.additionalData，全局使用

import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // css.preprocessorOptions[extension].additionalData
        // 该选项可以用来为每一段样式内容添加额外的代码。
        // 但是要注意，如果你添加的是实际的样式而不仅仅是变量，那这些样式在最终的产物中会重复。
        additionalData: `@use "@/assets/styles/index.scss" as *;`,
      },
    },
  }
})

3、vue中直接使用

<template>
  <div class="big-screen">
    使用 vw 和 vh 方案
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'BigScreen',
})
</script>
<style lang="scss" scoped>
.big-screen{
  background-color: aqua;
  width: vw(600);
  height: vh(600);
}
</style>

参考：

• 一次搞懂数据大屏适配方案 (vw vh、rem、scale)