teaching-design/data/Web/11.md

校园活动网站——响应式布局与媒体查询 教学设计

课题	校园活动网站——响应式布局与媒体查询
课时	1课时（40分钟）
教学目标	知识目标：理解响应式设计、视口和断点的含义，掌握视口设置、相对尺寸、图片自适应和媒体查询基本语法。 技能目标：能够使用浏览器设备模拟发现小屏问题，并通过媒体查询调整导航、卡片和页面间距，使网站适配桌面与手机。 素养目标：建立多设备用户意识和移动优先的基础观念，养成在不同视口下持续测试网页的习惯。
教学重难点	重点：视口设置；弹性图片；媒体查询；小屏布局调整。 难点：根据内容出现问题的位置选择断点，而不是照搬固定设备宽度；避免横向滚动和文字过小。
教学资源准备	校园活动网站项目、桌面与手机效果对比图、浏览器设备工具、响应式验收清单。

教学过程

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

板书设计

响应式设计

同一份内容 → 适配不同视口

基础：
viewport
max-width: 100%
弹性布局

媒体查询：
@media (max-width: 700px) {
  /* 小屏覆盖规则 */
}

流程：观察 → 断点 → 覆盖 → 多端复测

教学成效与反思

教学成效	学生能够使用设备模拟识别小屏问题，并通过媒体查询调整导航、卡片和间距。多数网站在三种视口下无横向滚动，图片和文字保持可读。
教学反思	学生容易先套用断点数值再寻找问题，或只测试一种手机尺寸。教学应坚持先缩放观察并记录问题宽度，再编写规则；验收采用随机宽度可有效检验适配的真实性。