Vue移动端项目适配

Vue移动端项目适配

在Vue移动端项目中使用postcss-pxtorem和lib-flexible来实现px自动转换成rem.

首先安装这两个依赖

1
2
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

在vue项目入口文件main.js中全局引入

1
import 'amfe-flexible'

配置postcss-pxtorem

  • vue-cli2的配置

    在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

1
2
3
4
5
6
7
8
9
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, // 根据设计图尺寸写,设计图是375,就写37.5
propList: ['*'], // 需要被转换的属性
selectorBlackList: [] // 不进行px转换的选择器
}
}
}
  • vue-cli3的配置

    项目根目录下的postcss.config.js文件,配置同vue-cli2

部分样式不想转成rem,可以将px写成大写的PX;
以上。

0%