react umi移动端屏幕适配(2种)

适配方案一

安装屏幕适配模块（步骤一）        

//以下命令任意安装一种即可

npm install postcss-px-to-viewport --save-dev  //npm安装命令

yarn add postcss-px-to-viewport  //yarn安装命令

在项目根目录下.umirc.ts 文件中添加extraPostCSSPlugins配置（步骤二）

我的是窗口宽度是375，可根据自己的窗口设置

// 引入适配模块
import px2vw from "postcss-px-to-viewport";
 
export default defineConfig({
    // 此处以下是要添加的配置（extraPostCSSPlugins包裹部分）
    extraPostCSSPlugins: [
        px2vw({
            unitToConvert: "px", //需要转换的单位，默认为"px"；
            viewportWidth: 375, //设计稿的视口宽度
            unitPrecision: 6, //单位转换后保留的小数位数
            propList: ["*"], //要进行转换的属性列表,*表示匹配所有,!表示不转换
            viewportUnit: "vw", //转换后的视口单位
            fontViewportUnit: "vw", //转换后字体使用的视口单位
            selectorBlackList: [], //不进行转换的css选择器，继续使用原有单位
            minPixelValue: 1, //设置最小的转换数值
            mediaQuery: false, //设置媒体查询里的单位是否需要转换单位
            replace: true, //是否直接更换属性值，而不添加备用属性
            // exclude: [/node_modules/], //忽略某些文件夹下的文件
            landscape: false,
        }),
    ],
});

适配方案二

安装屏幕适配命令（步骤一）

npm install postcss-pxtorem@5.1.1 --save-dev  //安装命令1

npm install lib-flexible --save  //安装命令2

使用 rem 单位进行适配：

        postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

        lib-flexible 用于设置 rem 基准值

在项目根目录下.umirc.ts 文件中添加以下配置（步骤二）

import pxtorem from 'postcss-pxtorem';  //引入适配模块

export default defineConfig({
 // 此处以下是要添加的配置（extraPostCSSPlugins包裹部分）
  extraPostCSSPlugins: [
    pxtorem({
      rootValue: 37.5, // UI设计图宽为375px
      propList: [
        '*',
        '!border',
        '!border-top',
        '!border-right',
        '!border-bottom',
        '!border-left',
        '!border-width',
      ],
      selectorBlackList: ['html'],
    }),
  ],
});

在src/app.js中添加这行代码，如果没有就创建一个app.js文件（步骤三）

import 'lib-flexible';

归结综合：postcss-pxtorem模块会将px单位自动转换为rem单位