react antd组件库css px 转 rem

项目在推进过程中，遇到测试平板分辨率有点低，而项目是 flex 布局，导致大部分视图 overflow: hidden 看不到.
先搞定 antd的

import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
const px2rem = px2remTransformer({
  rootValue: 16,
  precision: 5,
  mediaQuery: true,
});

<StyleProvider transformers={[px2rem]}>
          <BrowserRouter>
          <Routes>{xxx.routes}</Routes>
        </BrowserRouter>
       </StyleProvider>

我尝试对 rootvalue 动态改变发现没用，wc。

然后使用以下依赖包

 "postcss": "^8.5.6",
    "postcss-loader": "^8.2.0",
    "postcss-pxtorem": "^6.1.0",  
    "autoprefixer": "^10.4.23",

新建文件 postcss.config.js 在根目录

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        'last 10 versions',
      ],
      grid: true,
    },
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿宽度/10，例如设计稿为375，则设为37.5
      unitPrecision: 4,
      propList: ['*', '!border*', '!border-radius'], // 转换所有属性，除了border
      selectorBlackList: [], // 过滤掉.norem开头的class
      replace: true,
      mediaQuery: false,
      minPixelValue: 2,
      exclude: /node_modules[\\/]antd/i, // 排除antd
    },
  },
};

webpack的配置修改

{
        test: /\.css$/,
        use: [
          // getCacheLoader(".cache/cache-loader/css"),
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },

      // LESS 处理
      {
        test: /\.less$/,
        use: [
          // getCacheLoader(".cache/cache-loader/less"),
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },

      // SCSS/SASS 处理
      {
        test: /\.(scss|sass)$/,
        use: [
          // getCacheLoader(".cache/cache-loader/sass"),
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },

这样就初步对项目所有px 转化rem成功
接下来是 动态改变 ，根据页面宽度, 在 utils 弄个工具函数

export function calculateRootValue(){
    
    // 获取当前视口宽度
    let clientWidth = 1024; // 默认值
    if (typeof window !== 'undefined') {
      clientWidth = window.innerWidth;
    } 
    
    // 设计稿
    const designTarget = 1360;
    
    // 计算缩放比例
    let scale = clientWidth / designTarget;
    
    // 限制缩放范围（0.3-1.5倍）
    scale = Math.max(0.3, Math.min(scale, 2.5));
    
    // 计算 rootValue
    const baseValue = 16; // 例如：1920 -> 192, 750 -> 75
    let rootValue = baseValue * scale + (clientWidth > 1000 ? 1.3 : 0);
    // 限制 rootValue 范围
    // rootValue = Math.max(rootValue, Math.min(rootValue, 30));
    console.log(`[CSSinJS] rootValue calculated: ${rootValue}, scale: ${scale}, width: ${clientWidth}, `);
    
    return Math.floor(rootValue * 100000) / 100000;
  };

然后在项目app.tsx

setpx2remTransformer() {
    const rootValuePx = calculateRootValue();
    this.rootValuePx = rootValuePx;
    setTimeout(
      () =>
        document.documentElement.style.setProperty(
          'font-size',
          `${rootValuePx}px`,
        ),
      50,
    );
  }

 debouncedFunction = debounce(() => {
    this.setpx2remTransformer();
  }, 200);

  private initpx2remTransformer() {
    window.addEventListener('resize', this.debouncedFunction);
    window.addEventListener('orientationchange', this.setpx2remTransformer);
  }
  private removepx2remTransformer() {
    window.removeEventListener('resize', this.debouncedFunction);
    window.removeEventListener('orientationchange', this.setpx2remTransformer);
  }

这里通过 document.documentElement.style.setProperty(
'font-size',
${rootValuePx}px,
) 去修改根节点的 fs 即可。