1、utils.less

@charset "utf-8";

// 默认设计稿的宽度
@designWidth: 3600;

// 默认设计稿的高度
@designHeight: 810;

.px2vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}

.px2vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}
//字体
.px2font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}

2、配置全局

在vue.config.js下配置

css: {
    // 全局配置utils.scss
    loaderOptions: {
      less: {
        additionalData: `@import "@/assets/style/utils.less";`
      }
    }
  },

3、使用

.px2font(32);//字体
 .px2vw(width, 1237)//宽
      .px2vh(height, 741);
      .px2vh(margin-top, -30);
      .px2vh(padding-top, 10);