vue 移动端自适应布局 px转rem 1、在main.js中引入lib-flexible 2、配置postcss-px

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

1、在main.js中引入lib-flexible

import 'amfe-flexible'

2、配置postcss-pxtorem

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

vue-cli3 配置方式：在根路径下新增 postcss.config.js 文件,放入下述同样的代码

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      rootValue: 37.5, // 基准值(计算公式：设计图宽度/10)，设计图尺寸为375，基准值为375/10=37.5
      propList: ['*'], // 需要被转换的属性
      selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

3、直接根据设计稿的尺寸写px就行

** 4、注意：该插件不能转换行内样式中的 px**