pc端 如何使用vw实现自适应 vue sass 自定义函数

按道理pc端网页 px 足够适应，都是一些form提交，增删改查的东西，不太需要做到移动端的自适应，但不排除会有pc端的首页会有一些花里胡哨的图片，这个时候如果屏幕分辨率差距很大，会造成样式不匹配，所以写一个利用vw适配的方法，应付pc端的自适应绰绰有余了

主要利用的是sass的自定义函数

npm install node-sass

1.在src下创建style文件夹，在style文件夹下创建 global.scss 文件
2. 编写 global.scss 文件

$vw_base: 1440; //设计稿宽度
@function vw($px) {
    
    
	@return ($px / $vw_base) * 100vw;
}

这里只写了vw 没有写vh，因为高度这个东西，很恶心，直接按照vw适配就ok了
3. 在vue.config.js 引入

module.exports = {
    
    
css: {
    
    
        loaderOptions: {
    
    
            // postcss: {
    
    
            //     plugins: [
            //         postcss
            //     ]
            // },
            sass: {
    
    
                // @/ 是 src/ 的别名
                // 注意：在 sass-loader v9 中，这个选项名是 "additionalData" v7中这个			   选项名是data
                prependData: `@import "@/style/global.scss";`
            }
        }
    }
  }

4.使用

例如div宽度为144px
div {
    
    
	width: vw(144);
}

会自动转换为
div {
    
    
	width: 10vw;
}