react px自动转rem,屏幕自适应

1. React项目 前提使用的 @craco/craco 做webpack配置

2. 安装 yarn add postcss-pxtorem@5 lib-flexible@0.3

3. 在 craco.config.js 配置文件里加如下代码，如图
   （如图配置是设计稿宽度是375所以rootValue是37.5 这里设置的是html节点的font-size像数值，也就是html{font-size:37.5px}，如果设计稿宽度是750，你就配置75，html字体大小与屏幕宽度保持100的比例关系）

   
   image.png

复制代码

const  autoprefixer = require("autoprefixer");

const  pxtorem = require("postcss-pxtorem");

 style: {

 postcss: {

 plugins: [

 autoprefixer(),

 pxtorem({

 rootValue:  37.5,

 propList: ["*"],

        }),

      ],

    },

  },

4.在react的入口文件index.js加入如图代码

image.png

复制代码如下

import  "lib-flexible/flexible";

5.如果没有使用 @craco/craco做webpack配置，私聊探讨；也可以参考这个 https://blog.csdn.net/weixin_43957184/article/details/103621350

6.如果autoprefixer 找不到，请手动安装它

最后重点 postcss-pxtorem 内联样式无法自动转化，特别要记住这个