vue 中 使用 flexible 对 移动端 rem 适配

①  下载相关的包

yarn add amfe-flexible

yarn add postcss postcss-pxtorem

② 各个包的作用

amfe-flexible ： 屏幕尺寸改变时,改变 rem 基准对象的 font-size大小

postcss ： 对css代码做降级处理

postcss-pxtorem ： 自动把所有代码里的css样式的px，自动转 rem

③ 新建 postcss.config.js —— 设置相关配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']，
      selectorBlackList: ['.ignore']    // 表示要忽略什么，具体用法看文档
    }
  }
}

④ main.js 引入 flexible.js

import 'amfe-flexible'

vant移动适配教程： Vant 2 - Mobile UI Components built on Vue

postcss-pxtorem 文档： https://www.npmjs.com/package/postcss-pxtorem

其他相关文章： vant 配合vue 做移动端的自动适配