如何进行 REM 适配

目的：Vant UI 和设计稿一起使用如何进行适配移动端

❓ 如何进行 REM 适配

npm i amfe-flexible # 就是之前学过的 flexible.js

main.js

import 'amfe-flexible'

==REM 适配原理==：利用媒体查询或 JS 动态检测设配的宽度，不同宽度下设置对应的根元素字体大小，这样所有使用 REM 作单位的元素自然就跟着变化啦！

❓ 如何把写的 px 转换成 rem

npm install postcss-pxtorem@5 -D # -D 是安装到开发依赖，项目上线的时候就没用了
# yarn add postcss-pxtorem@5 -D

在根目录新建 .postcssrc.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

❓ PostCSS 是什么

PostCSS 之于 CSS 就相当于 Babel 之于 JS，PostCSS 能借助各种各样的插件处理 CSS，CSS 的编译器，Vue CLI 关于 CSS

❓ 碰到的问题，基准值到底设置成 37.5 还是 75，发现都不行

Vant UI 设计稿 375，用 flexible.js 划分了 10 份，所以基准值是 37.5

咱们设计师提供给我的设计稿 750（因为根据 iPhone6 的尺寸进行设计的，而 iPhone6 的物理像素就是 750，为了高清），用 flexible.js 划分了 10 份，所以基准值是 75

为啥 Vant UI 的是根据 375px 进行设计的呢，难道人家不知道高清这个事吗！？

高清不高清主要针对图片来说的！Vant UI 是一个 UI 库，没有涉及到图片那些东西！

🎈 如何解决基准值设置多少的问题？

借助了 postcss-pxtorem 这插件，这个插件的配置选项中 rootValue 可以指定为一个函数，函数参数里面可以拿到形参 file，这个 file 就代表处理的文件的路径，判断 file 里面是否包含 'vant' 这个字符串，如果包含说明处理的就还是 vant 基准值就应该是 37.5，如果不包含说明处理的就是设计稿中咱们自己写的样式，那么基准值就应该是 75

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue ({ file }) {
        // file => 要编译的样式的路径
        return file.includes('vant') ? 37.5 : 75
      },
      // * 号代表把所有的属性 px 转 rem
      propList: ['*']
    }
  }
}