vue项目Rem自适应

1-1.官方推荐方式postcss-pxtorem +lib-flexible
1-2.使用方式如下,3个步骤即可

1. 安装插件yarn或者npm

yarn add lib-flexible postcss-pxtorem

2. 然后在 main.js 中加载执行以下模块

import 'lib-flexible'

3. 编辑项目中文件,vue-cli 3 和2会不一样的

vue-cli 3:
项目下新建vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
                  rootValue: 37.5, //通常结合 lib-flexible 设置 rem 基准值,默认用37.5,不然容易出问题
                  selectorBlackList: ['.ignore'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换
                  propList: ['*']

          })
        ]
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

vue-cli 2:
根目录下.postcss.js文件（没有则新建一个）

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android >= 4.0',
        'iOS >= 7',
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //通常结合 lib-flexible 设置 rem 基准值,默认用37.5,不然容易出问题
      selectorBlackList: ['.ignore'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换
      propList: ['*']
    }
  }
}

效果截图:
省略哈~

--by Affandi ⊙▽⊙