umi移动端如何对px进行适配，适应不同的手机屏幕？

1.postcss-px-to-viewport插件的安装

npm install -D postcss-px-to-viewport
或：
yarn add postcss-px-to-viewport -D

2.具体参数说明：

参数	参数值类型	说明
unitToConvert	String	要转换的单位，【默认为 px】。
viewportWidth	数字	视口的宽度。
unitPrecision	Number	允许 vw 单位增长到的十进制数。
propList	数组	可以从 px 更改为 vw 的属性。 值需要完全匹配。 使用通配符 * 启用所有属性。例子： [’*’] 在单词的开头或结尾使用 。([’ position ‘] 将匹配 background-position-y) 用 ！不匹配属性。示例：[’’, ‘!letter-spacing’] 将“not”前缀与其他前缀组合在一起。示例：[’ ', '!font ']
viewportUnit	字符串	预期单位。
fontViewportUnit	字符串	字体的预期单位。
selectorBlackList	数组	要忽略并保留为 px 的选择器。 如果值是字符串，它会检查选择器是否包含字符串。 [‘body’] 会匹配 .body-class 如果 value 是 regexp，它会检查选择器是否与 regexp 匹配。 [/^body$/]将匹配body但不匹配.body
minPixelValue	数字	设置要替换的最小像素值。
mediaQuery	布尔值	允许在媒体查询中转换 px。
replace	布尔值	替换包含 vw 的规则而不是添加回退。
exclude	数组或正则表达式	忽略一些文件，如“node_modules” 如果值为正则表达式，将忽略匹配文件。 如果值为数组，则数的元素为正则表达式。
landscape	布尔值	@media (orientation: landscape)与通过landscapeWidth.
landscapeUnit	字符串	landscape选项的预期单位
landscapeWidth	数字	横向的视口宽度。

3.
在移动端开发过程中，响应式布局是必须要考虑的一个问题。基于UmiJs开发时，使用的组件库是antd-mobile，通过在.umirc.js中添加配置项，及可以通过对于的postCss插件postcss-px-to-viewport解决响应式布局的问题。代码如下：

4.其中，postcss-flexbugs-fixes用于修复移动端flex布局的bug；postcss-px-to-viewport用于自适应布局，会将px转成vm。