第10章 让网页适应所有屏幕

响应式设计：一套代码，处处得体 ｜ 课型：实习课 ｜ 建议课时：2节

🏠 返回总目录 / 第10章

🎯 学习目标

知识目标

  • 掌握视口meta标签的作用
  • 掌握媒体查询@media语法与断点设计
  • 理解移动优先设计思想
  • 掌握响应式图片srcset

能力目标

  • 能为博客首页编写手机端适配样式
  • 能用设备模拟器测试多终端效果
  • 能复刻竞赛任务5"现代布局"

德育目标

  • 培养包容不同设备用户的产品意识
  • 理解"移动优先"背后的用户导向思维

教学重点

  • @media媒体查询
  • 移动优先的断点策略
  • 竞赛任务5的布局还原

教学难点

  • 断点选择的依据（内容而非设备）
  • max-width与min-width的思维方向

💻 实例演示1个实例 · 可在线运行

▶ 响应式博客首页

拖窄窗口观察三栏变单栏：媒体查询实战演示。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，全屏观察三栏结构
  2. 缓慢拖窄窗口，记录布局变化的两个临界点
  3. 打开设备模拟器切换iPhone/iPad视图验证
  4. 注释掉640px媒体查询，观察手机下的混乱
  5. 把max-width改为min-width重写（移动优先思维）

效果观察点

  • 900px处卡片两栏变单栏
  • 640px处主侧栏堆叠为单列
  • meta viewport缺失时手机会缩放整页
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>响应式博客</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  body { font-family: "Microsoft YaHei", sans-serif; background: #f2f6f8; color: #1f2a33; }
  header { background: #123a52; color: #38d6c4; text-align: center; padding: 20px; }
  .wrap { max-width: 960px; margin: 20px auto; padding: 0 16px;
          display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }
  .posts { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
  .card { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 2px 8px rgba(18,58,82,.08); }
  .card h3 { color: #0f8c7f; margin-bottom: 8px; }
  aside .card { margin-bottom: 16px; }
  /* 断点：平板 */
  @media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
  /* 断点：手机 */
  @media (max-width: 640px) {
    .wrap { grid-template-columns: 1fr; }
    header h1 { font-size: 22px; }
  }
</style>
</head>
<body>
  <header><h1>响应式博客（拖窄窗口试试）</h1></header>
  <div class="wrap">
    <main class="posts">
      <div class="card"><h3>Blog Post 1</h3><p>两栏卡片在平板变单栏。</p></div>
      <div class="card"><h3>Blog Post 2</h3><p>手机下侧栏沉到主区下方。</p></div>
      <div class="card"><h3>Blog Post 3</h3><p>断点依据内容而不是设备型号。</p></div>
      <div class="card"><h3>Blog Post 4</h3><p>移动优先是行业共识。</p></div>
    </main>
    <aside>
      <div class="card"><h3>关于我</h3><p>侧栏区域</p></div>
      <div class="card"><h3>标签云</h3><p>HTML CSS JS</p></div>
    </aside>
  </div>
</body>
</html>

📋 实习任务书

任务目标：为已有博客首页完成全设备响应式适配

任务内容与评分
任务1：添加viewport meta标签（10分）
任务2：设计并实现900px与640px两个断点（30分）
任务3：手机端实现单列堆叠且字号可读（20分）
任务4：用设备模拟器测试三种设备并截图（20分）
任务5：复刻竞赛任务5"现代布局"（20分）

自我评价

📚 课后作业与预习