大屏自适应px转vw vh等

"sass": "^1.26.5",
    "sass-loader": "^8.0.2",


utils.scss


@use "sass:math"; //math函数，https://sass-lang.com/documentation/breaking-changes/slash-div

$bodyBg:#cdcdcd;
$slideBarWidth:280px;
$titleColor:blue;

$designWidth:5200;
$designHeight:1976;

  //这里宽高参考PSD设计稿 ；我这里宽为1920px，高为1080px为例，所以这里 计算vw时除以1920，计算vh时除以1080；以便在使用时，不用去计算倍数， PSD设计稿中的尺寸是多少，我们样式就是多少！！！
  /* 
  案例：一个class为title的div，宽100px, 高300px
  
  .title {
	  width: vw(100);
	  height: vh(300);
  }
  200/3840
	200/1920
  */

@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
	// @return $px * 1px;
}


@function vh($px) {
  @return math.div($px , $designHeight) * 100vh;
  //@return $px * 1px;
}

@function px2font($px) {
  @return math.div($px , $designWidth) * 100vw;
  // @return $px * 1px;
}


//滚动条样式
@mixin scrollBarStyle() {
	&::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px #9b9ba3;
		background: rgba(152, 155, 163, 0.2);
	}
}


@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }
}


// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

//https://blog.csdn.net/ww_5211314/article/details/109614511
:export {
  bodyBg:$bodyBg;
  slideBarWidth:$slideBarWidth;
  titleColor:$titleColor;
}


vue.config.js全局配置

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const port = process.env.port || process.env.npm_config_port || 8081 // dev port

module.exports={
	publicPath: '', //dev ./   prod /
	outputDir: 'dist',
	assetsDir: 'static',
	lintOnSave: false,//process.env.NODE_ENV === 'development',
	productionSourceMap: false,
	devServer: {	  
	  port: port,
	  open: true,
	  overlay: {
	    warnings: false,
	    errors: true
	  },
		proxy: {
		  '/api': {     //这里最好有一个 /
			target: '58.210.9.131:8280',  // 后台接口域名
			ws: true,        //如果要代理 websockets，配置这个参数
			secure: false,  // 如果是https接口，需要配置这个参数
			changeOrigin: true,  //是否跨域
			pathRewrite:{
			  '^/api':''
			}
		  }
		},
	},
	configureWebpack: {
	  // provide the app's title in webpack's name field, so that
	  // it can be accessed in index.html to inject the correct title.
	  name: "数字孪生平台",
	  resolve: {
	    alias: {
	      '@': resolve('src')
	    }
	  }
	},
	css:{
		//全局配置utils.scss
		loaderOptions:{
			sass:{
				 prependData:`@import "@/styles/utils.scss";`
			}
		}
	}
}


使用

  .menu {
          width: vw(160);
          height: vh(64);
          background-image: url("images/box_normat.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          cursor: pointer;
          .icon {
            width: vw(40);
            height: vh(32);
          }
          .name {
            font-size: vh(32);
            color: #fff;
            text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
            font-weight: 500;
          }

          &.roma{
            left: vw(479);
          }
          &.time {
            left: vw(712);
            top: vh(-18);
          }
          &.weather {
            left: vw(940);
            top: vh(-18);
          }

          &.season {
            left: vw(1168);
          }
          &.active {
            background-image: url("images/box_selected.png");
          }
        }