rem理解以及umi react

rem是指相对于根元素的字体大小的单位，在css中，通过设置font-size大小，可以控制整个html文档内使用rem单位的字体大小、元素的高度、内外边距等属性。rem是一种相对单位，与em单位相似，但区别在于rem是相对于根元素计算，而em是相对于其父元素计算。

rem在移动端适配使用的方式

首先移动端适配中，通常要根据设备的屏幕宽度动态设置根元素的font-size。这可以通过JavaScript来实现，比如说使用手淘的 amfe-flexible 插件或者类似的逻辑来计算设置。该插件会根据不同的设备屏幕宽度来适配font-size值，使得1rem在不同设备上代表不同的像素值，但是相对于屏幕的比例是一致的。

在css中使用rem单位

设置完跟元素的font-size后，就可以在css中使用rem单位嘞定义移动端页面的样式了。比如说，设置元素的宽高，内外边距等属性为热门，以实现在不同设备上等比例缩放的效果

使用媒体查询优化适配

虽然rem单位本身已经有了一定的自适应转换能力，但是为了更好的适配不同尺寸的屏幕，还可以结合css的媒体查询来设置不同屏幕下的根元素font-size，通过font-size值，可以更好，更精细的适配效果。

在 umi中移动端的适配

在react项目中，特别是在使用UmiJs这样的现代前端框架使，进行移动端屏幕适配通常包括设置根元素（《html》）的 font-size来使得rem单位能够基于屏幕宽度动态的变化，从而实现响应式。

首先安装配置postcss插件

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

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

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

// 引入适配模块
import px2vw from "postcss-px-to-viewport";
 
export default defineConfig({

    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';