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;
}

你可能感兴趣的:(vue.js,javascript,sass)