在移动端的项目中，需要去适配不同的手机屏幕，我们希望实现适配的效果是：与屏幕大小相关，以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小写
rem的布局原理：
1：单位，用相对单位rem为单位，rem相对于html的font-size计算的
html { font-size: 16px } => 1rem : 16px width=2rem 36px
html { font-size: 40px } => 1rem : 40px width=2rem 80px
2:动态的不同屏幕设置不同的html font-size，屏幕越小，font-size就越小
1：媒体查询，@media screen
2：原生js，监听屏幕的变化resize事件，动态的修改font-size即可
在使用Vant时，Vant中的样式默认使用px为单位，如果需要使用rem为单位，官方推荐使用一下两个巩工具，来达到目标
postcss-pxtorem 是一款postcss插件，可用于将单位转换为rem（写px，自动转换成rem）
lib-flexible 用于设置rem基准值，可以动态的设置html font-size的基准值
使用流程：
1：安装包
作用：把px单位自动转成rem单位 (作用: 就是之前安装的vscode的插件的作用)
yarn add postcss-pxtorem -D
修改rem基准值的js插件 需要在打包后需要使用
作用: 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
它的默认计算方式是屏幕宽度的1/10，默认值是37.5
yarn add amfe-flexible
2：新建配置文件postcss.config.js
在里面配置以下代码：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
配置postcss插件（37.5计算方式=> 屏幕宽度/10），设计图对应的标准屏，其他屏幕会自动自适应进行缩放，在使用rem布局之后，眼中应该只有标准屏，其他屏幕进行自适应
配置好postcss文件之后，编写的px会自动转换成rem
实际效果：
3、引入flexible
最后，入口文件main.js导入amfe-flexible（动态的设置html font-size） ，公式（屏幕宽/10）
import 'amfe-flexible'
它会根据手机尺寸来调整rem 的基准值：HTML标签上的font-size
