本文章使用 Vant UI 框架，其他 UI 框架可自行切换
本文章最终推荐方案为：postcss-px-to-viewport-8-plugin + 自定义行内样式转换插件
像素单位：px、em、rem、vw/vh等的区别？
- px：是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定
- em：为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。例如，当前元素设置了字体尺寸为24px，那么2em就代表48px
-
rem：为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准
例如，<HTML>元素设置了字体尺寸为24px，那么2rem就代表48px
-
vw和vh：相对单位，相对于当前视口()，又叫 Viewport
例如，10vw代表当前视口宽度的10%，20vh代表当前视口高度的20%
-
%：相对单位，相对于父元素的相关尺寸
例如，父元素设置了height: 100px，那么它的子元素height: 50%就代表50px
总结：一般移动端适配，使用 rem布局 或 Viewport (vw/vh)
rem 布局
如果需要使用 rem 单位进行适配，常常使用postcss-pxtorem 或 lib-flexible 两个方案
postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
postcss-pxtorem 已有4年没有更新，因此它是不支持 PostCSS 8.0+ 版本的（PostCss 8.0+ 以上的版本是主流，也是未来的方向），因此不推荐使用该方案
lib-flexible 用于设置 rem 基准值
访问 lib-flexible 的github仓库，文档中有这么一段话
由于
viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。因此不推荐使用该方案
Viewport布局
Vant 默认使用 px 作为样式单位(很多UI框架都是默认px)，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。