1、安装插件flexible插件 (适配移动端)
npm install lib-flexible -S
2、在main.js中导入
import 'amfe-flexible';
3、安装 postcss-pxtorem (把px转化为rem)
安装这个之后,在项目中写px单位就可以自动转化为rem单位了
npm install postcss-pxtorem --save
但是报错了,降级就行了
npm i postcss-pxtorem@5.1.1 --save
在vue.config.js中配置:
module.exports = {
css:{
loaderOptions:{
postcss:{
plugins: {
"postcss-pxtorem": {
rootValue: 75,
propList: ["*"]
/* 这个*作用是width,height,margin宽高这些属性的适配,单位转换为rem */
}
}
}
}
}
}
也可以在postcssrc.js或者postcss.config.js中写,这三个文件选其中之一配置就行
配置如下:
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 75, // 设计图宽度为750px时 就写比例75 为设计稿宽度的1/10
// rootValue根据设计稿宽度除以10进行设置
propList: ["*"]
}
}
}
文件位置和package.json同一级别就行
字体大小如果rem做单位的话,展示的效果不是很好,但是用了flexible插件以后,px会转为rem,现在还没有找到不改变字体大小的单位的方法。。。