移动端解决方案px适配不同手机屏幕【umi配置】

1.postcss-px-to-viewport是什么

将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

2.安装

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

3.参数说明

参数	参数值类型	说明
unitToConvert	字符串（String）	需要转换的单位，默认为"px"
viewportWidth	数字（Number）	设计稿的视口宽度
unitPrecision	数字（Number）	单位转换后保留的精度
propList	数组（Array）	可以从 px 更改为 vw 的属性，值需要完全匹配； 可以传入通配符*去匹配所有属性，例如：[‘*’]； 在属性的前或后添加*,可以匹配特定的属性. (例如['*position*'] 会匹配 background-position-y)； 在特定属性前加 !，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换 letter-spacing； ! 和 *可以组合使用， 例如: ['', '!font*']，将不转换 font-size 以及 font-weight 等属性；
viewportUnit	字符串（String）	预期单位
fontViewportUnit	字符串（String）	字体预期单位
selectorBlackList	数组（Array）	要忽略并保留为px的选择器。 如果值是字符串，它会检查选择器是否包含字符串。 例如：[‘body’] 会匹配 .body-class； 如果传入的值为正则表达式（regexp）的话，那么就会依据 CSS 选择器是否匹配该正则 。 例如：[/^body$/]将匹配body但不匹配.body;
minPixelValue	数字（Number）	设置要替换的最小像素值。
mediaQuery	布尔值（Boolean）	允许在媒体查询中转换 px。
exclude	布尔值（Boolean）	替换包含 vw 的规则而不是添加回退。
include	数组或正则表达式(Array or Regexp）	忽略一些文件，如“node_modules” 如果值为正则表达式，将忽略匹配文件。 如果值为数组，则数的元素为正则表达式；
landscape	布尔值（Boolean）	@media (orientation: landscape)与通过landscapeWidth。
landscapeUnit	字符串（String）	landscape选项的预期单位
landscapeWidth	数字（Number）	横向的视口宽度。

3.移动端开发，响应式布局解决方案。UmiJS开发时，再配置.umirc.ts中添加如下配置项，就可以对于postCss插件postcss-px-to-viewport解决响应式布局的问题。代码如下：

import { defineConfig } from "umi";
// 引入 postcss-px-to-viewport
import px2vw from 'postcss-px-to-viewport';

export default defineConfig({
  routes: [
    { path: "/", component: "home/index" },
    { path: "/docs", component: "docs" },
  ],
  npmClient: 'pnpm',
  // px转vw的配置，实现响应式开发
  extraPostCSSPlugins: [
    px2vw({
      viewportWidth: 750, // 我的设计稿的视口宽度 750，也有350的设计稿
      unitPrecision: 3, //单位转换后保留的小数位数
      viewportUnit: "vw", //转换后的视口单位
      selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
      minPixelValue: 1, //设置最小的转换数值
      mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
      exclude: [/node_modules/], //忽略某些文件夹下的文件
    })
  ]
});

4.感谢

记录这边文章时在方法中遇到的问题的解决方案。文章借鉴了：
npm的postcss-px-to-viewport官方文档说明
冬安.的 《umi移动端如何对px进行适配，适应不同的手机屏幕？》的文章。

5.结语

希望本文章对有遇到同样问题的小伙伴有所帮助。
如有帮助，请小伙伴们动动小手关注、点赞、收藏。在这里万分感谢了。
如果不对的地方，请大家指证。来自一个30+的前端程序猿。