react px自動轉rem,屏幕自適應

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

2. 安裝 yarn add postcss-pxtorem@5 [email protected]

3. 在 craco.config.js 配置文件里加如下代碼，如圖
   （如圖配置是設計稿寬度是375所以rootValue是37.5 這裏設置的是html節點的font-size像數值，也就是html{font-size:37.5px}，如果設計稿寬度是750，你就配置75，html字體大小與屏幕寬度保持100的比例關係）

   
   

複製代碼

const  autoprefixer = require("autoprefixer");

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

 style: {

 postcss: {

 plugins: [

 autoprefixer(),

 pxtorem({

 rootValue:  37.5,

 propList: ["*"],

        }),

      ],

    },

  },

4.在react的入口文件index.js加入如圖代碼

複製代碼如下

import  "lib-flexible/flexible";

5.如果沒有使用 @craco/craco做webpack配置，私聊探討；也可以參考這個 https://blog.csdn.net/weixin_43957184/article/details/103621350

6.如果autoprefixer 找不到，請手動安裝它

最後重點 postcss-pxtorem 內聯樣式無法自動轉化，特別要記住這個