移动端适配 vue+amfe-flexible

移动端适配 vue+amfe-flexible

（网上收集仅仅供自己记笔记学习用，欢迎大佬补充纠正）
1.安装npm i amfe-flexible
再main.js中引入 import "amfe-flexible"

2.在根目录的index.html 的头部加入手机端适配的meta代码

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

3.使用postcss-pxtorem 将px转换为rem

安装 npm i postcss-pxtorem@5.1.1 （版本需要变成 5.1.1 ）
然后再项目的根目录创建 postcss.config.js文件

module.exports = {
  plugins: {
​    'autoprefixer': {
​      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8', 'chrome>31']
​    },
​    'postcss-pxtorem': {
​      rootValue: 37.5,
​      propList: ['*']
​    }
  }
}

*温馨提示： rootValue这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
之所以设为37.5，是为了引用像vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。*