項目在推進(jìn)過程中，遇到測試平板分辨率有點低，而項目是 flex 布局，導(dǎo)致大部分視圖 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 動態(tài)改變發(fā)現(xiàn)沒用，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, // 設(shè)計稿寬度/10，例如設(shè)計稿為375，則設(shè)為37.5
      unitPrecision: 4,
      propList: ['*', '!border*', '!border-radius'], // 轉(zhuǎn)換所有屬性，除了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 轉(zhuǎn)化rem成功
接下來是 動態(tài)改變 ，根據(jù)頁面寬度, 在 utils 弄個工具函數(shù)

export function calculateRootValue(){
    
    // 獲取當(dāng)前視口寬度
    let clientWidth = 1024; // 默認(rèn)值
    if (typeof window !== 'undefined') {
      clientWidth = window.innerWidth;
    } 
    
    // 設(shè)計稿
    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,
) 去修改根節(jié)點的 fs 即可。