h5移动端像素适配 postcss-pxtorem和amfe-flexible

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem;

amfe-flexible 用于设置 rem 基准值

1==> 去下载amfe-flexible 和postcss-pxtorem

 "dependencies": {
    "amfe-flexible": "^2.2.1",
    "core-js": "^3.6.5",
    "postcss-pxtorem": "^5.1.1",
    "vant": "^2.12.9",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },

安装postcss-pxtorem和amfe-flexible的时候，要注意版本，
否者可能会出现如下Error: PostCSS plugin tailwindcss requires PostCSS 8
这个因为版本出问题了，下载之后，重新下载

npm install postcss-pxtorem -D
npm install amfe-flexible -S
-D 是 --save-dev 的简写
–save-dev || -D //开发依赖（辅助）
--save || -S // 运行依赖（发布）

2==>通过meta标签，设置设备宽度以及缩放比例

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

3==> 创建文件 .postcssrc.js文件，在根目录中

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, //vant-UI的官方根字体大小是37.5
      propList: ['*']
    }
  }
}

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

参考：https://www.jianshu.com/p/220a186cc033

4==>在main.js中去引入

import 'amfe-flexible/index.js'

我们可以看见在h5端上

我们可以看见在pc端上