第十二天：响应式实战 — 一个 PC/手机都适配的完整页面

蜗牛往上爬 · 前端工业可视化学习笔记第 12 篇
前两天学了 Grid 布局和响应式基础。今天把它们综合起来，做一个完整的响应式页面——导航栏、统计卡片、设备列表在 PC 和手机之间自动切换布局。同时搞定图片自适应、字体自适应和常见设备断点。

一、图片自适应

/* 图片不超出容器，高度自动等比例缩放 */
img {
  max-width: 100%;
  height: auto;
}

两行代码，图片永远不会超出容器。这是响应式图片的最基础保障。

<!-- 不同屏幕加载不同分辨率的图片（进阶） -->
<img src="small.jpg"
     srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     alt="响应式图片">

二、字体自适应：clamp()

clamp() 是 CSS 的"夹子函数"——设一个最小值、理想值、最大值，浏览器自动选择。

/* clamp(最小值, 理想值, 最大值) */
.title {
  font-size: clamp(16px, 3vw, 32px);
  /* 最小 16px，理想值 3vw（屏幕宽度的 3%），最大 32px */
}

在不同屏幕上的表现：

屏幕宽度	3vw 计算值	clamp 实际值
375px（手机）	11.25px	16px（最小值限制）
768px（平板）	23px	23px（理想值）
1400px（PC）	42px	32px（最大值限制）

/* 标题：手机不小，PC 不大 */
h1 { font-size: clamp(18px, 4vw, 28px); }

/* 正文：始终舒适 */
p { font-size: clamp(14px, 2vw, 16px); }

/* 大数字：手机不挤，大屏有冲击力 */
.big-number { font-size: clamp(24px, 6vw, 48px); }

三、常见设备断点速查表

/* 小手机（iPhone SE 等） */
@media (max-width: 480px) { }

/* 手机横屏 / 小平板 */
@media (max-width: 768px) { }

/* 平板竖屏 */
@media (max-width: 1024px) { }

/* 笔记本（1366×768） */
@media (max-width: 1366px) { }

/* 台式机（1920×1080） */
@media (max-width: 1920px) { }

实际项目中，480、768、1024 三个断点覆盖 95% 的场景。

四、动手练：PC/手机双端适配页面

综合 Grid + 响应式，做一个完整的双端适配页面。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <!-- 移动端必须加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式页面 - PC/手机双端适配</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }

      body {
        font-family: "Microsoft YaHei", sans-serif;
        background: #f0f2f5;
        color: #333;
      }

      /* ===== 导航栏 ===== */
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #1a3a5c;
        color: white;
        padding: 0 24px;
        height: 56px;
      }

      .navbar .logo {
        font-size: clamp(16px, 3vw, 22px);
        font-weight: bold;
      }

      .nav-menu {
        display: flex;
        list-style: none;
        gap: 20px;
      }

      .nav-menu a {
        color: #8ecae6;
        text-decoration: none;
        font-size: 14px;
      }

      .nav-menu a:hover { color: #ffb703; }

      /* ===== 内容区 ===== */
      .content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 16px;
      }

      .content h2 {
        color: #1a3a5c;
        margin-bottom: 20px;
        font-size: clamp(18px, 4vw, 26px);
      }

      /* 统计卡片 */
      .stats-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 24px;
      }

      .stat-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        border: 1px solid #e0e0e0;
      }

      .stat-card .number {
        font-size: clamp(24px, 5vw, 36px);
        font-weight: bold;
        color: #1a3a5c;
      }

      .stat-card .label {
        font-size: 13px;
        color: #888;
        margin-top: 4px;
      }

      /* 设备列表 */
      .device-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }

      .device-card {
        background: white;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        border-left: 4px solid #1a3a5c;
      }

      .device-card h4 {
        color: #1a3a5c;
        margin-bottom: 8px;
      }

      .device-card .info {
        color: #555;
        line-height: 1.8;
        font-size: 14px;
      }

      .status {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
      }

      .status-running { background: #d4edda; color: #2d6a4f; }
      .status-stopped { background: #f8d7da; color: #d62828; }

      .footer {
        background: #1a3a5c;
        color: #8ecae6;
        text-align: center;
        padding: 16px;
        font-size: 13px;
        margin-top: auto;
      }

      /* ===== 响应式：平板（≤ 1024px） ===== */
      @media (max-width: 1024px) {
        .stats-row { grid-template-columns: repeat(2, 1fr); }
        .device-grid { grid-template-columns: repeat(2, 1fr); }
      }

      /* ===== 响应式：手机（≤ 768px） ===== */
      @media (max-width: 768px) {
        .navbar {
          flex-direction: column;
          height: auto;
          padding: 12px 16px;
          gap: 8px;
        }

        .nav-menu {
          gap: 16px;
          flex-wrap: wrap;
          justify-content: center;
        }

        .nav-menu a { font-size: 13px; }

        .stats-row {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
        }

        .stat-card { padding: 14px; }
        .device-grid { grid-template-columns: 1fr; }
      }

      /* ===== 响应式：小手机（≤ 480px） ===== */
      @media (max-width: 480px) {
        .stats-row { grid-template-columns: 1fr; }
        .content { padding: 16px 10px; }
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <div class="logo">智慧工厂 · 监控中心</div>
      <ul class="nav-menu">
        <li><a href="#">设备监控</a></li>
        <li><a href="#">产量统计</a></li>
        <li><a href="#">告警中心</a></li>
        <li><a href="#">系统设置</a></li>
      </ul>
    </nav>

    <div class="content">
      <h2>设备概览</h2>

      <div class="stats-row">
        <div class="stat-card">
          <div class="number">48</div>
          <div class="label">设备总数</div>
        </div>
        <div class="stat-card">
          <div class="number">42</div>
          <div class="label">运行中</div>
        </div>
        <div class="stat-card">
          <div class="number" style="color:#d62828">3</div>
          <div class="label">告警中</div>
        </div>
        <div class="stat-card">
          <div class="number">3</div>
          <div class="label">已停机</div>
        </div>
      </div>

      <div class="device-grid">
        <div class="device-card">
          <h4>压缩机 A</h4>
          <p class="info">车间：一车间<br>温度：58℃<br><span class="status status-running">运行中</span></p>
        </div>
        <div class="device-card">
          <h4>冷却泵 B</h4>
          <p class="info">车间：二车间<br>温度：32℃<br><span class="status status-stopped">已停机</span></p>
        </div>
        <div class="device-card">
          <h4>供料机 C</h4>
          <p class="info">车间：一车间<br>温度：45℃<br><span class="status status-running">运行中</span></p>
        </div>
        <div class="device-card">
          <h4>传送带 D</h4>
          <p class="info">车间：三车间<br>速度：2.1m/s<br><span class="status status-running">运行中</span></p>
        </div>
        <div class="device-card">
          <h4>包装机 E</h4>
          <p class="info">车间：三车间<br>速度：120件/min<br><span class="status status-running">运行中</span></p>
        </div>
        <div class="device-card">
          <h4>检测仪 F</h4>
          <p class="info">车间：二车间<br>精度：0.01mm<br><span class="status status-stopped">已停机</span></p>
        </div>
      </div>
    </div>

    <footer class="footer">
      © 2026 智慧工厂 · 蜗牛往上爬 学习项目
    </footer>
  </body>
</html>

五、响应式策略全景分析

屏幕宽度	导航栏	统计卡片	设备列表	字号策略
> 1024px（PC）	水平一行	4 列	3 列	`clamp()` 取理想值
768-1024px（平板）	水平一行	2 列	2 列	`clamp()` 自适应
480-768px（手机）	垂直堆叠	2 列	1 列	`clamp()` 取最小值附近
< 480px（小手机）	垂直堆叠	1 列	1 列	`clamp()` 取最小值

核心策略：Grid 列数随断点递减，clamp() 让字号平滑过渡，Flex 导航栏在手机端切换为垂直排列。

六、常见坑点与最佳实践

坑 1：移动端没加 viewport

<!-- ❌ 忘记这行，手机端显示的是缩小版 PC 页面 -->
<!-- ✅ 必须加在 head 里 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

坑 2：固定 px 宽度

/* ❌ PC 上 1200px 没问题，手机上 375px 溢出 */
.container { width: 1200px; }

/* ✅ 用 % + max-width */
.container { width: 90%; max-width: 1200px; }

坑 3：媒体查询顺序搞反

/* ❌ 后面的覆盖前面的（max-width 应从大到小） */
@media (max-width: 480px) { .card { width: 100%; } }
@media (max-width: 768px) { .card { width: 50%; } }  /* 覆盖了 480px 的规则 */

/* ✅ 从大到小排列 */
@media (max-width: 768px) { .card { width: 50%; } }
@media (max-width: 480px) { .card { width: 100%; } }

最佳实践清单

[x] 移动端必须加 viewport meta 标签
[x] 固定宽度用 % + max-width，不超过屏幕
[x] 字号用 clamp() 或 rem，不用固定 px
[x] 图片用 max-width: 100%; height: auto;
[x] 媒体查询保持统一顺序（从大到小或从小到大）

七、这些知识在工业可视化里用在哪？

管理后台 = 响应式

/* 管理后台在 PC 和平板上都能用 */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
}

@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr;  /* 手机端侧边栏隐藏或折叠 */
  }
}

大屏 = 固定尺寸

/* 大屏固定 1920×1080，不做响应式 */
.screen { width: 1920px; height: 1080px; overflow: hidden; }

区分清楚：大屏是固定尺寸（1920×1080），管理后台是响应式。两者用不同的 CSS 策略。

八、自测挑战 10 题

图片自适应的核心 CSS 是什么？
font-size: clamp(16px, 3vw, 32px) 的含义是什么？
viewport meta 标签的作用是什么？移动端为什么必须加？
写出 4 个常用断点（手机、平板、笔记本、台式机）。
统计卡片在大屏 4 列、平板 2 列、手机 1 列，写出完整的媒体查询。
把设备列表的手机端改成 2 列。
用 clamp() 改写统计卡片的数字字号。
把页面宽度从 max-width: 1200px 改成 max-width: 100%，观察大屏上的变化。
在导航栏中加一个"汉堡菜单"图标（☰），在手机端隐藏菜单，改为显示图标。
用 F12 设备模拟器，切换横屏和竖屏，观察布局变化。

加分挑战：在页面中嵌入一张图片，测试 max-width: 100% 的响应式效果。

九、总结

今天学完，你应该能做到：

[x] 实现图片自适应（max-width: 100%）
[x] 使用 clamp() 做字体自适应
[x] 写出 4 段式响应式断点（480/768/1024/1366）
[x] 独立做出 PC/手机双端适配的完整页面
[x] 理解 Grid + 媒体查询的响应式策略

一句话带走：响应式 = Grid 控制列数 + 媒体查询控制断点 + clamp() 控制字号 + max-width: 100% 控制图片。一个页面，适配所有屏幕。

📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 4 周 · 第 3 篇

【HTML+CSS】day12-responsive-practice