安装插件flexible (适配移动端)
npm install lib-flexible -S
npm install --save amfe-flexible
安装完成之后打开main.js
只要导入就行了 不需要命名然后Vue.use()
import 'amfe-flexible';
安装 postcss-pxtorem (把px转化为rem)
安装这个之后 开发过程中就可以写px了 插件会自动转化为移动端单位rem
npm i postcss-pxtorem@5.1.1 --save
新建了一个文件 名叫 postcss.config.js
并且引入配置
module.exports = {
plugins: {
"postcss-pxtorem": {
// 设计稿 375:37.5
// 设计稿:750:75
// Vant 是基于 375
rootValue: 75, // ps设计图纸宽度为750px时 就写上面的比例75 设计稿宽度的1/10
// rootValue根据设计稿宽度除以10进行设置
propList: ["*"]
/*
这个*作用是width,height,margin宽高这些属性的适配,单位转换为rem
都移动端项目了,那肯定全部都要转换
*/
}
}
}
文件位置与package.json同级