vant官方推荐一下2款插件，使用注意版本兼容问题

  • postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
  • lib-flexible 用于设置 rem 基准值

lib-flexible

cnpm install lib-flexible --save

// main.js 移动端适配
import 'lib-flexible/flexible.js'

// 在index.html入口文件中，设置meta的配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">

postcss-pxtorem

cnpm install postcss-pxtorem@5.1.1 -D
cnpm install postcss-loader@6.1.1 --save-dev

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}


// 注：安装时，不要太高版本的，我用webpack 3.版本的，postcss-pxtorem6.0.0版本安装，因为postcss-pxtorem版本太高，报错
文章目录