vue移动端适配（postcss-pxtorem和amfe-flexible）

一、移动端适配（postcss-pxtorem和amfe-flexible） 在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配) 实现思路：

①通过postcss-pxtorem实现将px转成rem，

②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件，我们就可以实用设计稿的px来进行开发了。

1.安装postcss-pxtorem和amfe-flexible Npm install postcss-pxtorem --save-dev Npm install amfe-flexible --save

2.在vue的main.js中引入amfe-flexible import ‘amfe-flexible’;

3.在.postcssrc.js中配置，vue-cli3.0的版本在postcss.config.js中配置

  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

基本配置就完成了，rootValue这个值可以自己配置，如过你设计稿的长度是750基数的可以将rootValue的值修改为75

转载于:blog.csdn.net/qq_41656414…