做大屏自适应时，全局行内以及sass,px转vwvh方法

import Big from 'big.js';



/** Echarts图表字体、间距自适应 */
export const fitChartSize = (size: number, defalteWidth = Number(variables.screenDesignWidth)) => {
  const clientWidth =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return size;
  const scale = clientWidth / defalteWidth;
  return Number((size * scale).toFixed(5));
};

/** 转换为vw单位 */
export const toVw = (size: number, defalteWidth = Number(variables.screenDesignWidth)) => {
  return Number(new Big(size).div(defalteWidth).times(100).toFixed(5, 0)) + 'vw';
};

/** 转换为vh单位 */
export const toVh = (size: number, defalteHeight = Number(variables.screenDesignHeight)) => {
  return Number(new Big(size).div(defalteHeight).times(100).toFixed(5, 0)) + 'vh';
};

@use 'sass:math';
@use './variables.scss' as *;

@function toFixed($px, $num) {
  $sum: math.pow(10, $num) * 100;
  @return math.div(math.floor($px * $sum), $sum);
}

@function vw($px) {
  @return toFixed(math.div($px, $screen-design-width), 5) * 100vw;
}

@function vh($px) {
  @return toFixed(math.div($px, $screen-design-height), 5) * 100vh;
}

scss方法需要进行提前引入

vite.config.ts  

 css: {
      postcss: {
        plugins: postcssPlugins,
      },
      preprocessorOptions: {
        scss: {
          additionalData: `
         
            @use '@/styles/mixins.scss' as *;
            @use '@/styles/utils.scss' as *;
           
          `,
        },
      },

      modules: {
        generateScopedName: '[local]___[hash:base64:5]',
      },
    },

.box{
 padding: 0 vw(20) vh(20) vw(20);
}

 <div :style="{ 'font-size': toVh(14) }">哈哈哈</div>

以上为示例