react历史项目没有处理屏幕适配如何快速改造

项目技术栈：

主应用home: pnpm + react + next + ts + vite + antd + tailwindcss

子应用web: pnpm + react + ts + vite + antd + tailwindcss

 

实现方案：postcss + postcss-pxtorem

实现步骤：

1.在需要的项目里安装依赖 postcss-pxtorem （用于自动把现有代码的px转换成rem） 、@ant-design/cssinjs (用户antd组件自动把px转成rem）

#"@test-web/web" 是子项目的包名，在package.json里的name定义

pnpm --filter @test-web/web install postcss-pxtorem -D 

pnpm --filter @test-web/web install @ant-design/cssinjs

 

2.配置postcss.config.js

// postcss.config.js 
export default { 
plugins: {
 tailwindcss: {}, // 处理支持tailwindcss 
 autoprefixer: {}, // 处理支持autoprefixer自动适配不同浏览器的兼容前缀
 'postcss-pxtorem': { // 处理插件基本属性配置
　　rootValue: 100, 
　　unitPrecision: 5,
 　　propList: ['*'], 
　　selectorBlackList: ['norem'], 
　　minPixelValue: 3,
 },
 },
 };

 

 

3.修改main.tsx去注入StyleProvider修改antd的自动转换px

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/utils/i18n.ts'; // 引入i18next配置文件
import './index.css';
// ----- 1.引入了StyleProvider
import { legacyLogicalPropertiesTransformer, px2remTransformer, StyleProvider } from '@ant-design/cssinjs';

// ----- 2.设置根字体大小
const px2rem = px2remTransformer({
  rootValue: 100,
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <I18nextProvider i18n={i18n}>
    <ConfigProvider locale={(new URLSearchParams(window.location.search).get('lang') || 'zh') === 'zh' ? zhCN : enUS}>
      // ----- 3.包裹app组件
      <StyleProvider transformers={[legacyLogicalPropertiesTransformer, px2rem]}>
        <App />
      </StyleProvider>
    </ConfigProvider>
  </I18nextProvider>
);

 

 

4.全局样式里面加上根字体的设置和缩放

html {
  font-size: calc((100vw / 1920) * 100);
}
body {
  margin: 0;
  overflow-y: hidden;
  line-height: 24px;
  font-size: 16px;
}
/* 适配到最小1280，小于这个屏幕出滚动条 */
@media screen and (max-width: 1280px) {
  html.norem {
    font-size: 74px;
  }
}