如何使用Ant Design 5的Typography组件实现自适应文本？

以下是几种实用方案，可让Title、Text、Paragraph组件的文本根据屏幕分辨率自动缩放：

1. CSS媒体查询自定义样式 #

通过媒体查询针对不同屏幕尺寸设置对应字体大小，精准控制各断点下的文本表现：

/* 默认样式（大屏幕） */
.responsive-title {
  font-size: 2rem;
}
.responsive-text {
  font-size: 1rem;
}
.responsive-paragraph {
  font-size: 1.1rem;
}

/* 平板及以下屏幕 */
@media (max-width: 768px) {
  .responsive-title {
    font-size: 1.5rem;
  }
  .responsive-text {
    font-size: 0.9rem;
  }
  .responsive-paragraph {
    font-size: 1rem;
  }
}

/* 手机屏幕 */
@media (max-width: 576px) {
  .responsive-title {
    font-size: 1.2rem;
  }
  .responsive-text {
    font-size: 0.85rem;
  }
  .responsive-paragraph {
    font-size: 0.95rem;
  }
}

使用时为组件添加自定义类名：

<Title className="responsive-title">响应式标题</Title>
<Text className="responsive-text">响应式文本</Text>
<Paragraph className="responsive-paragraph">这里是段落内容，会随屏幕尺寸自动调整字号</Paragraph>

2. 视窗单位（vw）实现自动缩放 #

利用视窗宽度单位vw，让字体大小直接随屏幕宽度比例变化，无需手动设置多断点：

.responsive-vw-title {
  font-size: clamp(1.2rem, 5vw, 2.5rem); /* 限制字号范围：最小1.2rem，最大2.5rem */
}
.responsive-vw-text {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
}
.responsive-vw-paragraph {
  font-size: clamp(0.95rem, 2.8vw, 1.1rem);
}

clamp()函数可避免极端屏幕下字号过大或过小，现代浏览器均支持该特性。

3. 结合Ant Design响应式工具类扩展 #

Ant Design内置了基础的文本尺寸工具类（如text-xs、text-sm），可通过Less/Sass扩展自定义响应式工具类，与框架断点保持一致：

@import '~antd/dist/antd.less';

// 基于Ant Design断点定义响应式文本类
.responsive-typography {
  @media @sm { /* 小屏幕断点 */
    font-size: @font-size-sm;
  }
  @media @md { /* 中屏幕断点 */
    font-size: @font-size-base;
  }
  @media @lg { /* 大屏幕断点 */
    font-size: @font-size-lg;
  }
}

4. 封装自定义响应式组件 #

将样式逻辑封装成复用组件，减少重复代码：

import { Title, Text, Paragraph } from 'antd';

const ResponsiveTitle = ({ children, ...props }) => (
  <Title className="responsive-title" {...props}>{children}</Title>
);

const ResponsiveText = ({ children, ...props }) => (
  <Text className="responsive-text" {...props}>{children}</Text>
);

const ResponsiveParagraph = ({ children, ...props }) => (
  <Paragraph className="responsive-paragraph" {...props}>{children}</Paragraph>
);

export { ResponsiveTitle, ResponsiveText, ResponsiveParagraph };

后续直接导入使用即可：

<ResponsiveTitle>自定义响应式标题</ResponsiveTitle>

内容的提问来源于stack exchange，提问作者Evgeniy S.