CSS: 响应式设计基础
响应式设计（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) 基本语法
▶ 示例
HTML
<style>
/* 当视口宽度 ≤ 768px 时应用的样式 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
.media-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
</style>
<div class="media-demo">Media demo</div>
(2) 常用断点
▶ 示例
HTML
<style>
/* 小手机：< 576px */
@media (max-width: 575px) { ... }
/* 大手机/小平板：576px - 767px */
@media (min-width: 576px) and (max-width: 767px) { ... }
/* 平板：768px - 991px */
@media (min-width: 768px) and (max-width: 991px) { ... }
/* 桌面：992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) { ... }
/* 大桌面：≥ 1200px */
@media (min-width: 1200px) { ... }
.media-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
</style>
<div class="media-demo">Media demo</div>
(3) 移动优先 vs 桌面优先
移动优先（Mobile First）——先写手机样式，再用 min-width 逐步增强：
▶ 示例
HTML
<style>
/* 手机样式（默认） */
.column {
width: 100%;
margin-bottom: 20px;
background: #e3f2fd;
padding: 10px;
box-sizing: border-box;
}
/* 平板及以上 */
@media (min-width: 768px) {
.column {
width: 50%;
float: left;
}
}
/* 桌面及以上 */
@media (min-width: 1024px) {
.column {
width: 33.33%;
}
}
</style>
<div class="row">
<div class="column">列 1</div>
<div class="column">列 2</div>
<div class="column">列 3</div>
</div>
桌面优先——先写桌面样式，再用 max-width 逐步缩小：
▶ 示例
HTML
<style>
/* 桌面样式（默认） */
.column {
width: 25%;
float: left;
background: #fce4ec;
padding: 10px;
box-sizing: border-box;
}
/* 平板 */
@media (max-width: 991px) {
.column {
width: 50%;
}
}
/* 手机 */
@media (max-width: 575px) {
.column {
width: 100%;
}
}
.media-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
</style>
<div class="media-demo">Media demo</div>
一般推荐移动优先——因为移动端限制更多，先处理限制再逐步放开更容易。
4. 弹性单位
| 单位 | 说明 | 适用场景 |
|---|---|---|
% |
相对父元素 | 宽度、定位 |
em |
相对自身或父元素字体大小 | 间距、边距 |
rem |
相对根元素（html）字体大小 | 字体、间距 |
vw |
相对视口宽度 | 大标题、全屏布局 |
vh |
相对视口高度 | 全屏区块 |
vmin |
vw和vh中较小的值 | 自适应正方形 |
vmax |
vw和vh中较大的值 | 特殊场景 |
(1) 用 rem 做响应式字体
▶ 示例
HTML
<style>
html {
font-size: 16px; /* 默认 */
}
@media (max-width: 768px) {
html {
font-size: 14px; /* 移动端缩小根字体 */
}
}
p {
font-size: 1rem; /* 桌面16px，移动14px */
}
h1 {
font-size: 2rem; /* 桌面32px，移动28px */
}
.media-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
</style>
<div class="media-demo">Media demo</div>
(2) 用 vw/vh 做全屏布局
▶ 示例
HTML
<style>
.hero {
width: 100vw; /* 全屏宽 */
height: 100vh; /* 全屏高 */
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 2rem;
}
h1 {
font-size: 8vw; /* 标题大小随视口变化 */
text-align: center;
}
</style>
<div class="hero">主打区域标题内容</div>
<h1>全屏标题，字体大小随窗口自动变化</h1>
5. 弹性图片
▶ 示例
HTML
<style>
img.demo-img {
max-width: 100%; /* 图片最大不超过容器宽度 */
height: auto; /* 高度自适应 */
border: 1px solid #ddd;
}
</style>
<p>图片元素：将 <code>max-width: 100%</code> 应用到 <code><img></code> 标签上，确保图片不超过父容器宽度。</p>
background-image 的响应式处理：
▶ 示例
HTML
<style>
.banner {
background-image: url("desktop-bg.jpg");
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.banner {
background-image: url("mobile-bg.jpg"); /* 手机用更小的图 */
}
}
.media-demo { padding: 20px; background: #f0f0f0; border-radius: 8px; border: 1px solid #ddd; }
</style>
<div class="media-demo">Media demo</div>
❓ 常见问题
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%，然后调整浏览器窗口大小，观察图片自适应效果。
