按道理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;
}