# 校园活动网站——响应式布局与媒体查询 教学设计
| **课题** | **校园活动网站——响应式布局与媒体查询** |
|:---|:---|
| **课时** | 1课时（40分钟） |
| **教学目标** | **知识目标**：理解响应式设计、视口和断点的含义，掌握视口设置、相对尺寸、图片自适应和媒体查询基本语法。
**技能目标**：能够使用浏览器设备模拟发现小屏问题，并通过媒体查询调整导航、卡片和页面间距，使网站适配桌面与手机。
**素养目标**：建立多设备用户意识和移动优先的基础观念，养成在不同视口下持续测试网页的习惯。 |
| **教学重难点** | **重点**：视口设置；弹性图片；媒体查询；小屏布局调整。
**难点**：根据内容出现问题的位置选择断点，而不是照搬固定设备宽度；避免横向滚动和文字过小。 |
| **教学资源准备** | 校园活动网站项目、桌面与手机效果对比图、浏览器设备工具、响应式验收清单。 |
## 教学过程
| 教学环节 | 教学内容 | 教师活动 | 学生活动 | 设计意图 |
|:---|:---|:---|:---|:---|
| **1. 多端问题导入**
（5分钟） | 在手机视口打开现有网站，发现导航拥挤、图片溢出和卡片过窄问题。 | **设备演示**
用开发者工具切换桌面和手机视口，展示同一页面的差异。
**任务发布**
提出“让网站在窄屏仍可阅读、可操作”的适配任务。 | **问题记录**
按结构、文字、图片、操作四类记录小屏问题。
**优先排序**
选出最影响使用的两个问题。 | 从真实设备体验出发，让学生理解响应式设计服务于不同用户环境。 |
| **2. 响应原理探究**
（10分钟） | 学习视口、流式尺寸、最大宽度和内容断点。 | **概念讲解**
说明视口元标签的作用，演示固定宽度与百分比宽度的差异。
**断点观察**
缓慢缩小窗口，在布局开始拥挤的位置记录宽度，解释断点应由内容决定。 | **宽度实验**
拖动窗口观察布局变化并记录首次出现问题的宽度。
**概念判断**
区分固定尺寸、相对尺寸和最大宽度的适用场景。 | 通过连续变化观察断点形成过程，避免把响应式等同于记忆某个数值。 |
| **3. 媒体查询示范**
（8分钟） | 学习 `@media (max-width: ...)`，调整导航方向、卡片宽度和页面间距。 | **代码演示**
在窄屏条件下将导航改为纵向或换行，卡片改为单列，缩小容器内边距。
**图片优化**
设置图片最大宽度不超过容器并保持比例。 | **跟随编码**
添加一组媒体查询，观察规则在断点前后是否生效。
**工具验证**
从计算样式中确认覆盖规则来源。 | 用最小适配规则理解条件样式和覆盖关系，连接前面选择器知识。 |
| **4. 多端适配实践**
（13分钟） | 完成导航、卡片、图片和间距的响应式优化。 | **任务分解**
要求无横向滚动、图片不溢出、导航可操作、卡片在小屏单列、正文保持可读。
**巡回指导**
针对固定宽度、断点冲突和规则顺序问题，引导用设备工具逐项定位。 | **样式改造**
根据内容问题设置断点并完成四项适配。
**设备测试**
在至少三种视口宽度下测试，填写验收结果并修正问题。 | 以多视口验收保证响应式不是“写了媒体查询”，而是实际解决使用问题。 |
| **5. 成果总结评价**
（4分钟） | 对比桌面与手机效果，归纳响应式测试流程。 | **作品抽测**
随机选择视口宽度检查作品，点评内容完整性和操作可达性。
**流程总结**
归纳“缩放观察—定位问题—设置断点—编写覆盖—多端复测”。 | **动态展示**
拖动窗口展示布局连续变化。
**自查归档**
确认三种宽度均通过清单。 | 用随机宽度避免只适配某个设备，形成持续测试和内容驱动断点意识。 |
## 板书设计
```text
响应式设计
同一份内容 → 适配不同视口
基础：
viewport
max-width: 100%
弹性布局
媒体查询：
@media (max-width: 700px) {
/* 小屏覆盖规则 */
}
流程：观察 → 断点 → 覆盖 → 多端复测
```
## 教学成效与反思
| | |
|:---|:---|
| **教学成效** | 学生能够使用设备模拟识别小屏问题，并通过媒体查询调整导航、卡片和间距。多数网站在三种视口下无横向滚动，图片和文字保持可读。 |
| **教学反思** | 学生容易先套用断点数值再寻找问题，或只测试一种手机尺寸。教学应坚持先缩放观察并记录问题宽度，再编写规则；验收采用随机宽度可有效检验适配的真实性。 |