Vue移动端项目适配

Vue移动端项目适配

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

首先安装这两个依赖

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

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

import 'amfe-flexible'

配置postcss-pxtorem

• vue-cli2的配置

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

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 37.5, // 根据设计图尺寸写，设计图是375，就写37.5
        propList: ['*'], // 需要被转换的属性
        selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

• vue-cli3的配置

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

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