Vant 中的样式默认使用 `px` 作为单位，如果需要使用 `rem` 单位，推荐使用以下两个工具：
- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem
- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值
下面我们分别将这两个工具配置到项目中完成 REM 适配。
一、使用 [lib-flexible](https://github.com/amfe/lib-flexible) 动态设置 REM 基准值（html 标签的字体大小）**
1、安装
npm i amfe-flexible2、然后在 `main.js` 中加载执行该模块
import 'amfe-flexible'最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 `font-size` 的变化。
例如在 iPhone 6/7/8 （375x667）设备下，html 标签字体大小为 37.5 px
lib-flexible：把设备屏幕宽度分成10等分，则一等分的宽度为设备宽度的1/10
二、使用 postcss-pxtorem 将 px 转为 rem
1、安装
npm install postcss-pxtorem -D知识补充：
npm install -d 就是npm install --save-dev
npm insatll -s 就是npm install --save
我们在使用npm install安装模块或插件的时候，有两个命令都可以把依赖写入到package.json文件里面去，分别是：
npm install --save-dev depName
或
npm install --save depName
需要说明的是：Dependencies一词的中文意思是依赖和附属的意思，而dev则是develop（开发）的简写。
所以它们的区别在 package.json 文件里面体现出来的就是，使用 --save-dev 安装的插件，被写入到 devDependencies区块里面去，而使用--save 安装的插件，则是被写入到 dependencies 区块里面去。
那 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？
devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的，所以dependencies下面的包不仅在开发阶段会用到，而且在运行阶段也要用到，不同于DevDependences，它下面的包只能用于开发环境。
比如我们写一个项目要依赖于jQuery，没有这个依赖，项目运行就会报错，那么，这时候就应该把jQuery这个依赖写入dependencies中去，再安装jQuery的时候，应该用npm install -save jquery。
而我们日常开发过程中，使用到的一些构建工具，比如glup、webpack，这些只是在开发过程中使用的依赖，项目上线运行的时候是不需要它们的，所以可以在安装的时候，将它们写入devDependencies，安装时候用的命令就应该是npm install -save-dev webpack来安装。
2、然后在项目根目录中创建 .postcssrc.js 文件
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 8']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}rootValue 应该如何设置呢？
如果你使用的是基于 lib-flexable 的 REM 适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是 750 宽，则应该设置为 75。但是vant建设设置为37.5，为什么？因为vant是基于375写的
所以必须设置为37.5，唯一的缺点是使用我们设计稿的尺寸必须是75
有没有更好的解决办法：
如果是vant的样式，就按照37.5来转换
如果是我们自己的样式，就按照75来转换
通过查询文档，我们发现rootValue支持两种类型：
数字；固定的数值：rootValue: 37.5,
函数：可以动态处理返回rootValue（）{}
postcss-pxtorem处理每个css文件的时候都会调用这个函数
它会把被处理的css文件相关的信息（eg：文件路径(file属性)--字符串）通过参数传递给该函数
module.exports = {
plugins: {
//配置使用autoprefixer插件
//作用：生成浏览器css样式规则前缀---生成在多版本浏览器都可兼容的css
//vuecli内部已经配置了autoprefixer插件
//所以又配置了一次，所以产生冲突了
// 'autoprefixer': {
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },
//配置使用postcss-pxtorem插件
//作用：把px转化为rem
'postcss-pxtorem': {
rootValue({file}){
return file.indexOf('vant')==-1?75:37.5
},
//配置要转化的css的属性
//*表示所有
propList: ['*'],
//配置不要转换的样式资源
//exclude:'github-markdown'
//排除不想生成rem的文件名，不要加后缀（.css）
}
}
}3、配置完毕，重新启动服务
最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem。
关于 .postcssrc.js 配置文件知识补充：
.postcssrc.js 是 PostCSS 的配置文件。
（1）PostCSS 介绍
PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：
-
Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
-
PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
-
postcss-pxtorem 可以实现将 px 转换为 rem
-
...
目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。
PostCSS 一般不单独使用，而是与已有的构建工具进行集成。
Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件。
Vue CLI 内部使用了 PostCSS。
你可以通过
.postcssrc或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过vue.config.js中的css.loaderOptions.postcss配置 postcss-loader。我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用
package.json的 browserslist 字段。
（2）Autoprefixer 插件的配置
autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。
Replace Autoprefixer browsers option to Browserslist config. Use browserslist key in package.json or .browserslistrc file. Using browsers option can cause errors. Browserslist config can be used for Babel, Autoprefixer, postcss-normalize and other tools. If you really need to use option, rename it to overrideBrowserslist. Learn more at: https://github.com/browserslist/browserslist#readme https://twitter.com/browserslist
警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。
[Android] >= 4.0 [iOS] >= 8
具体语法请参考这里。
（3）postcss-pxtorem 插件的配置
-
rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换 -
propList用来设定可以从 px 转为 rem 的属性-
例如
*就是所有属性都要转换，width就是仅转换width属性
-