响应式布局理解

为了适配用户的不同尺寸设备，有时需要将相同页面进行多种布局展示和添加条件样式，最早是为了解决移动端适配问题。

媒体查询是响应式布局的基础，通常使用@media来表示。@media是 CSS 条件规则的集合，并不是一个方法或函数。

语法

1
2
3

@media 媒体类型 and (媒体特性) {
  /* CSS 规则 */
}

媒体类型包括如下：

• all：适用于所有设备（默认值）
• screen：用于电脑屏幕、平板电脑、智能手机等
• print：用于打印机和打印预览
• speech：用于屏幕阅读器等发声设备

  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

  /* 适用于所有设备 */ @media all { body { font-family: Arial, sans-serif; } } /* 只在屏幕设备上应用 */ @media screen { body { background-color: #f0f0f0; } } /* 打印时应用的样式 */ @media print { body { font-size: 12pt; } .no-print { display: none; } } /* 语音设备 */ @media speech { body { voice-family: male; } } /* 组合使用 */ @media screen, print { body { line-height: 1.2; } }

媒体查询使用

媒体类型可以不写，默认是all。
以下代表的含义是：用户设备窗口视图width的最小值是 768px，只有大于等于768px时才会生效作用域中的样式。
相反，如果是max-width:768px代表只有小于等于768px才会生效。
记忆：min最小不小过多少，max最大不大过多少。否则失效。

1
2
3
4
5
6
7
8
9
10
11

/* 基础样式 */
body {
  font-size: 16px;
}

/* 媒体查询 */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

CSS BootStrop 响应式断点值

链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Antd 栅格系统(Row)断点值

链接

1
2
3
4
5
6

xs	屏幕 < 576px 响应式栅格
sm	屏幕 ≥ 576px 响应式栅格
md	屏幕 ≥ 768px 响应式栅格
lg	屏幕 ≥ 992px 响应式栅格
xl	屏幕 ≥ 1200px 响应式栅格
xxl	屏幕 ≥ 1600px 响应式栅格

• X-Small (xs): 0px
  • 默认，针对超小型设备（竖屏手机，小于576px）
• Small (sm): 576px
  • 针对小型设备（横屏手机，576px及以上）
• Medium (md): 768px
  • 针对中型设备（平板，768px及以上）
• Large (lg): 992px
  • 针对大型设备（桌面显示器，992px及以上）
• Extra large (xl): 1200px
  • 针对特大型设备（大桌面显示器，1200px及以上）
• Extra extra large (xxl): 1400px
  • 针对超大型设备（更大的桌面显示器，1400px及以上）

通用的响应式设计原则（基于 Antd 栅格系统）

回顾 Ant Design (Antd) 的栅格系统断点：

• xs: < 576px

• sm: ≥ 576px

• md: ≥ 768px

• lg: ≥ 992px

• xl: ≥ 1200px

• xxl: ≥ 1600px

  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 37 38 39 40 41

  import React from 'react'; import { Row, Col } from 'antd'; const ResponsiveLayout = () => { return ( <Row gutter={[16, 16]}> {/* Main Content */} <Col xs={24} sm={24} md={16} lg={18} xl={18}> <div style={{ background: '#1890ff', padding: '20px', color: 'white' }}> Main Content </div> </Col> {/* Sidebar */} <Col xs={24} sm={24} md={8} lg={6} xl={6}> <div style={{ background: '#13c2c2', padding: '20px', color: 'white' }}> Sidebar </div> </Col> {/* Additional Content Boxes */} <Col xs={24} sm={12} md={8} lg={8} xl={8}> <div style={{ background: '#faad14', padding: '20px', color: 'white' }}> Box 1 </div> </Col> <Col xs={24} sm={12} md={8} lg={8} xl={8}> <div style={{ background: '#52c41a', padding: '20px', color: 'white' }}> Box 2 </div> </Col> <Col xs={24} sm={24} md={8} lg={8} xl={8}> <div style={{ background: '#722ed1', padding: '20px', color: 'white' }}> Box 3 </div> </Col> </Row> ); }; export default ResponsiveLayout;

  这个例子展示了一个响应式布局，包含主内容区、侧边栏和额外的内容框。

• xs (超小屏幕，如手机): 所有元素都是全宽的，垂直堆叠。

• sm (小屏幕，如平板): 主内容和侧边栏仍然全宽。 Box 1 和 Box 2 并排，各占半宽，Box 3 全宽。

• md (中等屏幕): 主内容占 16 列，侧边栏占 8 列。 Box 1, Box 2, Box 3 并排，各占 8 列。

• lg 和 xl (大屏幕和超大屏幕): 主内容占更多空间（18 列），侧边栏变窄（6 列）。 Box 1, Box 2, Box 3 保持并排。

原则：

1. 从最小的屏幕开始设计，然后逐步为更大的屏幕添加功能和复杂性。这样可以确保在所有设备上都有良好的基础体验。（渐进增强）
2. 确定哪些内容对用户最重要，在较小的屏幕上优先展示这些内容。较不重要的内容可以在大屏幕上显示或通过交互方式展示。（内容优先级）