vue + vite 项目架构笔记---- PC端屏幕自适应方案

背景：

项目中总有很多界面 需要做大小屏幕适配的兼容，那么怎么能够快速实现这一方案呢，SASS的出现是个非常好用的工具，可以通过自定义函数，来实现自动计算。

方案：vue3 + vite + sass

具体实现细节：

1. 创建utils.scss 文件，我的项目中路径 为： src\styles\utils.scss；
2. 配置vite.config.js ,实现utils.scss的全局注册
3. 就可以在每个vue文件中快乐的使用了

具体代码： 

1. utils.scss文件如下：

//使用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.config.js 文件如下：

export default defineConfig({

    ```

    css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@import "@/styles/utils.scss";`
			}
		}
	},

    ```

})

3. vue中的使用方式： 直接使用vw设置宽度，vh设置高度即可，不需要添加px,直接写数值！！！

         img {
                width: vw(130);
                height: vh(64);
              }