# Ant Design 响应式布局
响应式布局就是根据不同设备类型、屏幕尺寸实现不同的界面布局，比如电脑和手机的界面布局一般都是不一样的。实现响应式布局的方式有很多（Responsive Web Design (opens new window)），本文主要介绍通过 Media queries (opens new window) 来实现实现响应式布局。
# Ant Design 断点
Ant Design Grid 栅格断点 (opens new window)扩展自 BootStrap 4 的规则 (opens new window)，定义了 6 个断点
| 断点 | 像素点 |
|---|---|
| xs | < 576px |
| sm | >= 576px |
| md | >= 768px |
| lg | >= 992px |
| xl | >= 1200px |
| xxl | >= 1600px |
Ant Design 也定义了这些断点的变量
Ant Design 使用 Less，样式变量在 这里 (opens new window) 可以找到
// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone
// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;
// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 实现响应式 Drawer 组件
一些 Ant Design 组件实现了响应式，比如 Row / Col (opens new window), Form (opens new window) 等，可以通过 { xs: 8, sm: 16, md: 24} 实现响应式布局，然而 Drawer (opens new window) 只有一个 width 属性，不支持响应式设计。我们可以通过 Media queries (opens new window) 和 Ant Design 定义的断点来实现响应式 Drawer 组件。
# Demo
import styles from './app.less';
// import styles from './app.scss';
import { Button, Drawer, Space } from 'antd';
import React, { useState } from 'react';
function App() {
const [visible, setVisible] = useState(false);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
return (
<div className="App">
<Button type="primary" onClick={showDrawer} className={styles.app_button}>
Open
</Button>
<Drawer
className={styles.app_drawer}
title="Drawer"
placement={"right"}
onClose={onClose}
visible={visible}
>
<div className={styles.app_drawer_content}></div>
</Drawer>
</div>
);
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Use Sass/Scss
使用
!important，是因为Drawer有一个style: {width : 378px}
如果你使用 Create-React-App，使用 Sass/Scss，请参考 添加 Sass 样式表 (opens new window)
$screen-xxl-min: 1600px;
$screen-xl-min: 1200px;
$screen-lg-min: 992px;
$screen-md-min: 768px;
$screen-sm-min: 576px;
$screen-xs-max: ($screen-sm-min - 1px);
$screen-sm-max: ($screen-md-min - 1px);
$screen-md-max: ($screen-lg-min - 1px);
$screen-lg-max: ($screen-xl-min - 1px);
$screen-xl-max: ($screen-xxl-min - 1px);
.app-drawer {
.ant-drawer-content-wrapper {
@media screen and (min-width: $screen-xxl-min) {
width: 800px !important;
}
@media screen and (min-width: $screen-xl-min) and (max-width: $screen-xl-max) {
width: 700px !important;
}
@media screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
width: 600px !important;
}
@media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
width: 500px !important;
}
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: 400px !important;
}
@media screen and (max-width: $screen-xs-max) {
width: 300px !important;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Use Less
如果你使用 Create-React-App 5+，使用 Less，请参考 https://stackoverflow.com/questions/57749719/using-less-files-with-react#answer-64370773
@screen-xxl-min: 1600px;
@screen-xl-min: 1200px;
@screen-lg-min: 992px;
@screen-md-min: 768px;
@screen-sm-min: 576px;
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
.app_drawer {
:global {
.ant-drawer-content-wrapper {
@media screen and (min-width: @screen-xxl-min) {
width: 800px !important;
}
@media screen and (min-width: @screen-xl-min) and (max-width: @screen-xl-max) {
width: 700px !important;
}
@media screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
width: 600px !important;
}
@media screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
width: 5000px !important;
}
@media screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
width: 4000px !important;
}
@media screen and (max-width: @screen-xs-max) {
width: 300px !important;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36