CSS: 响应式设计基础
最后更新：2026-10-13
响应式设计（Responsive Web Design，RWD）是一种让网页在不同设备（手机、平板、桌面）上都能提供良好浏览体验的设计方法。它的核心理念是"一次设计，处处适配"。
响应式基础属性速查表
| 属性/技术 | 常用值 | 作用 |
|---|---|---|
@media |
@media (max-width: 768px) { ... } |
媒体查询（断点处改变布局） |
max-width |
1200px, 100% |
最大宽度（容器自适应常用） |
min-width |
320px |
最小宽度（防止过窄） |
em |
1em = 父元素 font-size |
相对单位（相对于父元素字体） |
rem |
1rem = 根元素 font-size |
相对单位（相对于根元素字体） |
vw / vh |
50vw, 100vh |
视口百分比 |
% |
50%, 100% |
相对于父容器百分比 |
fr |
1fr, 2fr |
Grid 中的份数单位 |
clamp() |
clamp(16px, 3vw, 32px) |
值范围限制（最小/首选/最大） |
min() / max() |
min(100%, 1200px) |
取最小/最大值 |
1. 三大核心要素
响应式设计基于三个核心技术：
- 弹性网格布局：使用相对单位（如 %、fr、vw、vh、rem）而非固定像素
✅ 单位选择指南： 字体用
rem（相对根元素），容器宽度用 % 或 fr，视口相关用 vw/vh。尽量避免用 px 做布局尺寸——固定像素在不同屏幕上的表现天差地别。
- 弹性图片/媒体：图片和视频能根据容器自动缩放
- 媒体查询：根据设备特征应用不同的 CSS 样式
2. 视口（Viewport）设置
在 HTML 的 <head> 中添加视口 meta 标签是响应式设计的第一步：
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：页面宽度等于设备宽度initial-scale=1.0：初始缩放比例为 1（不缩放）
不加这个标签，手机浏览器会"假装"自己是桌面浏览器，然后缩放页面，导致文字小到看不清。
3. 媒体查询（Media Queries）
媒体查询让你根据设备特征（如屏幕宽度、分辨率等）应用不同的 CSS 样式。
(1) 基本语法
▶ 示例
▶ 试一试(2) 常用断点
▶ 示例
▶ 试一试(3) 移动优先 vs 桌面优先
移动优先（Mobile First）——先写手机样式，再用 min-width 逐步增强：
▶ 示例
▶ 试一试桌面优先——先写桌面样式，再用 max-width 逐步缩小：
▶ 示例
▶ 试一试一般推荐移动优先——因为移动端限制更多，先处理限制再逐步放开更容易。
4. 弹性单位
| 单位 | 说明 | 适用场景 |
|---|---|---|
% |
相对父元素 | 宽度、定位 |
em |
相对自身或父元素字体大小 | 间距、边距 |
rem |
相对根元素（html）字体大小 | 字体、间距 |
vw |
相对视口宽度 | 大标题、全屏布局 |
vh |
相对视口高度 | 全屏区块 |
vmin |
vw和vh中较小的值 | 自适应正方形 |
vmax |
vw和vh中较大的值 | 特殊场景 |
(1) 用 rem 做响应式字体
▶ 示例
▶ 试一试(2) 用 vw/vh 做全屏布局
▶ 示例
▶ 试一试5. 弹性图片
▶ 示例
▶ 试一试background-image 的响应式处理：
▶ 示例
▶ 试一试❓ 常见问题
Q 没有 viewport meta 标签会怎样？
A 移动端浏览器会用桌面宽度（通常 980px）渲染页面，然后缩小到手机屏幕大小。你会看到文字小到看不清，需要双指缩放才能阅读。所以
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是响应式设计的前提。Q 媒体查询的断点怎么选？
A 推荐先写手机端样式（mobile-first），然后用 min-width 逐步增强。常见断点参考：手机 < 576px，平板 768px，笔记本 992px，桌面 1200px。但不要被这些数字限制——根据你的实际内容决定断点。
Q 响应式设计一定要用 rem 吗？
A 不一定。rem 更适合字体大小，布局宽高用 %、fr、vw/vh 更合适。关键是不用固定 px 做布局尺寸。单位的选择取决于场景：字体用 rem，容器用 %，间距用 em 或 rem。
📖 小节
- 响应式设计的核心是"灵活适配"——用弹性单位替代固定像素、用媒体查询在不同屏幕下应用不同样式、让图片和媒体自适应容器
- 记住三步：加 viewport meta 标签、用相对单位写布局、在断点处用媒体查询调整
📌 必写标签： 没有
<meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端就会用桌面宽度渲染页面，文字小到看不清。这个标签是所有响应式设计的前提。
- 移动优先是最推荐的做法，先从最小的屏幕开始设计，再逐步增强
📝 作业
- 创建一个页面，在桌面端显示三栏布局（三段平分），在平板上显示两栏布局，在手机上显示单栏布局（使用媒体查询实现）。
- 使用
rem单位设置字体大小，然后在媒体查询中修改根元素html的font-size，观察所有文字等比例缩放的效果。 - 创建一个响应式导航栏——桌面端水平展开，手机端隐藏（或变成汉堡菜单）。
- 设置图片的
max-width: 100%，然后调整浏览器窗口大小，观察图片自适应效果。
