Ant Design的响应式布局依赖栅格系统，基于Flex布局，通过xs、sm、md、lg、xl五个断点控制不同屏幕下的列排列，合理使用Row和Col组件可实现自适应界面。
Ant Design 的响应式布局主要依赖于栅格系统（Grid System）来实现，它基于 Flex 布局，通过预设的断点控制不同屏幕尺寸下的列排列和显示方式。要实现响应式布局，关键在于合理使用 Row 和 Col 组件，并结合响应式属性。
理解 Ant Design 栅格系统断点
Ant Design 定义了五个响应式断点，对应不同的屏幕宽度：
- xs：屏幕宽度
- sm：屏幕宽度 ≥ 576px
- md：屏幕宽度 ≥ 768px
- lg：屏幕宽度 ≥ 992px
- xl：屏幕宽度 ≥ 1200px
- xxl：屏幕宽度 ≥ 1600px
你可以为 Col 组件设置不同的断点属性，从而在不同设备上呈现合适的布局。
使用响应式属性控制布局
Col 组件支持直接传入对象，定义不同屏幕下的 span、offset 等值。
立即学习“前端免费学习笔记（深入）”；
示例代码：|
内容块 内容块
上面的代码表示：
- 在超小屏幕上，每列占满整行（24格），垂直堆叠
- 在小屏及以上，逐步变为一行两列、三列、四列
配合 Row 的 gutter 实现间距响应
Row 的 gutter 属性也支持响应式写法，可以设置不同断点下的间距。
示例：
|
内容 内容
这里 gutter 使用数组，分别设置水平和垂直间距，且每个值可响应不同断点。
隐藏或显示元素（响应式显示控制）
虽然 Ant Design 不提供类似 Bootstrap 的 d-none 类，但你可以结合 CSS 媒体查询或使用 Responsive Hooks 来动态渲染。
推荐使用 useBreakpoint Hook 获取当前断点：
import { useBreakpoint } from 'antd';
function MyComponent() {
const screens = useBreakpoint();
return (
{screens.md ? '中屏以上显示' : '小屏显示简化内容'}
);
}
这样可以根据屏幕尺寸决定渲染内容或结构。
基本上就这些。掌握好 Col 的响应式对象写法、Row 的 gutter 配置，再结合 useBreakpoint 控制逻辑，就能在 Ant Design 中灵活实现响应式布局。关键是根据设计稿设定合理的断点行为，让页面在手机、平板、桌面都表现良好。
