如何使用react在移动端（PC端）适配

1.PC端适配包

npm i postcss-pxtorem amfe-flexible

2.在config中找到 webpack.config.js 在 webpack.config.js 中添加以下代码

  require("postcss-pxtorem")({
                  rootValue: 192,//设置根元素的字体大小，此值将作为rem的基准。
                  unitPrecision: 3,//设置转换后的rem单位的小数点精度。
                  propList: ['*'],//指定需要转换的CSS属性列表，'*'表示转换所有属性。
                  mediaQuery: false,//是否在媒体查询中转换像素单位。
                  exclude: /(node_modules)/,//正则表达式，用于排除不需要转换的文件夹，如node_modules。
                  minPixelValue: 1,//设置最小的像素值，小于这个值的像素不会被转换
                })

添加完的效果

2.1 如果没有config文件夹在终端输出以下代码

npm run eject

2.2在终端 npm run eiect 如果报错 

分析报错：

    这通常意味着你正在尝试执行一个 Git 操作（如切换分支、拉取或推送），但是你的工作目录中有未跟踪的文件（即 Git 不知道这些文件应该被跟踪还是忽略）或者你有未提交的更改。

解决方法：

 初始化 Git 仓库

git init

 添加文件到暂存区

git add .

 # 这会添加所有文件到暂存区，或者你可以使用 git add <filename> 来添加特定文件
提交更改：

git commit -m 'Saving before ejecting'

 完成这些步骤后，你就可以安全地运行 npm run eject 命令了，因为你已经保存了当前的更改。

3.最后在index.js / index.tsx里引入amfe-flexible

import "amfe-flexible";

移动端
1..首先下移动端适配所用的包

npm i postcss-px2rem lib-flexible
  2.然后在config中找到 webpack.config.js 在 webpack.config.js 中添加以下代码

  先引入

 var px2rem = require('postcss-px2rem')
 再配置

 px2rem({ remUnit: 192 })
 代码添加完的效果

3.最后在index.js / index.tsx里引入lib-flexible

 import "lib-flexible"