vue使用rem实现窗口大小自适应

1. 安装依赖

cnpm install lib-flexible --save
#需要指定5.1.1版本
cnpm install postcss-pxtorem@5.1.1 --save

2. 引入插件（main.js里添加）

//自适应rem插件
import 'lib-flexible';

3. 添加配置（脚手架2、3不一样）

• cli3在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: ['*']
          })
        ]
      }
    }
  }
};

• cli2（根目录下.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: ['*']
    }
  }
}