大屏vw和vh适配方案（sass版）

按照设计稿的尺寸，将px按比例计算转为vw和vh。

假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸），即： 网页宽度=1920px，网页高度=1080px；我们都知道，网页宽度=100vw，网页宽度=100vh。
所以，在1920x*1080px的屏幕分辨率下1920px = 100vw，1080px = 100vh。这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下:

vwView = (300px / 1920px ) * 100vw;
vhView = (200px / 1080px ) * 100vh;

所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕。

但是每次都手动计算时不现实的，所以，需要封装一个方法，让它帮我自动计算：

// 使用scss的math函数
@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;
}

如果是sass的1.33版本以前的使用“ / ” 代替

例：

// 使用scss的math函数
@use "sass:math";

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

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

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

 引入：在vue.config.js中引入

 css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" }
      },
      scss: {
        additionalData: (content, loaderContext) => {
          const { resourcePath } = loaderContext;
          if (resourcePath.endsWith("variables.scss")) return content;
          return `@import "@/assets/styles/largeScreen.scss"; 
          ${content}`;
        },
      }
    }
  },

ddddddddddddddddd使用：