js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd

在 React 项目中使用 Ant Design 实现不同分辨率下字体大小的自适应，可以通过配置 Ant Design 的主题变量结合媒体查询来实现。下面是具体的实现方案：

1. 首先，你需要配置 Ant Design 的主题定制，利用 less 变量来定义基础字体大小
2. 使用媒体查询针对不同分辨率设置不同的基础字体大小
3. 让 Ant Design 的所有组件都基于这个基础字体大小进行缩放

以下是实现代码：

// 导入 Ant Design 样式
@import '~antd/dist/antd.less';

// 媒体查询 - 响应式字体大小
@media (max-width: 767px) {
   
  :root {
   
    --font-size-base: 12px;
  }
  @font-size-base: 12px;
  @font-size-lg: 14px;
  @font-size-sm: 10px;
}

@media (min-width: 768px) and (max-width: 1023px) {
   
  :root {
   
    --font-size-base: 14px;
  }
  @font-size-base: 14px;
  @font-size-lg: 16px;
  @font-size-sm: 12px;
}

@media (min-width: 1024px) and (max-width: 1439px) {
   
  :root {
   
    --font-size-base: 16px;
  }
  @font-size-base: 16px;
  @font-size-lg: 18px;
  @font-size-sm: 14px;
}

@media (min-width: 1440px) {
   
  :root {
   
    --font-size-base: 18px;
  }
  @font-size-base: 18px;
  @font-size-lg: 20px;
  @font-size-sm: 16px;
}

// 应用布局样式
.app-layout {
   
  min-height: 100vh;
}

.site-layout-content {
   
  min-height: 280px;
}

实现原理说明：

1. 配置方面：

   • 使用 customize-cra 和 react-app-rewired 来覆盖 create-react-app 的默认配置
   • 通过 addLessLoader 启用 less 支持，并配置 Ant Design 的基础主题变量

2. 响应式实现：

   • 在 App.less 中使用媒体查询针对不同分辨率范围定义不同的 @font-size-base 变量
   • Ant Design 的所有组件都会基于 @font-size-base 计算自身的字体大小
   • 同时定义了 CSS 变量 --font-size-base 方便在自定义组件中使用

3. 分辨率断点设置：

   • 移动设备：<768px - 较小字体
   • 平板：768px-1023px - 中等字体
   • 笔记本/小屏桌面：1024px-1439px - 标准字体
   • 大屏桌面：≥1440px - 较大字体

这种方式可以确保 Ant Design 组件和你自己的自定义组件在不同分辨率下都能保持一致的字体大小比例，提供良好的跨设备体验。