第十一天：响应式设计 — 一个页面，适配所有屏幕

蜗牛往上爬 · 前端工业可视化学习笔记第 11 篇
上一篇用 Grid 做了一个漂亮的"数据看板"，但只在 PC 上好看。今天学响应式设计——让同一个页面在手机、平板、PC 上都自动适配。核心手段：媒体查询、流式单位、移动优先。

一、什么是响应式设计？
二、媒体查询：@media
三、常用断点速查
四、移动优先（Mobile First）
五、流式单位：em/rem/vw/vh/%
六、max-width：防止过宽
七、动手练：让数据看板响应式
八、常见坑点与最佳实践
九、这些知识在工业可视化里用在哪？
十、自测挑战 10 题
十一、总结

一、什么是响应式设计？

响应式 = 同一个页面，在不同屏幕尺寸上自动调整布局。

PC 大屏（> 1024px）：   4 列面板
平板（768-1024px）：    2 列面板
手机（< 768px）：       1 列面板

不需要为每个设备写一套代码，一套 HTML + CSS 适配所有屏幕。

二、媒体查询：@media

媒体查询是响应式的核心手段——根据屏幕宽度等条件，切换不同的 CSS 规则。

基本语法

/* 当屏幕宽度 ≤ 768px 时，这里面的样式生效 */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;       /* 变成一列 */
  }
}

两种常用写法

/* ① max-width：屏幕 ≤ 某宽度时生效（从大到小） */
@media (max-width: 768px) { }

/* ② min-width：屏幕 ≥ 某宽度时生效（从小到大，移动优先） */
@media (min-width: 768px) { }

三、常用断点速查

断点写法	目标设备	含义
`@media (max-width: 480px)`	小手机	屏幕宽度 ≤ 480px
`@media (max-width: 768px)`	手机 / 小平板	屏幕宽度 ≤ 768px
`@media (max-width: 1024px)`	平板	屏幕宽度 ≤ 1024px
`@media (min-width: 1025px)`	PC / 大屏	屏幕宽度 ≥ 1025px

/* 完整示例：四段式响应 */
/* 默认 = 手机端（移动优先） */
.card { width: 100%; }

/* 平板及以上 */
@media (min-width: 768px) {
  .card { width: 50%; }
}

/* PC 及以上 */
@media (min-width: 1024px) {
  .card { width: 25%; }
}

四、移动优先（Mobile First）

先写手机端样式（默认），再逐步增强到大屏。

/* ✅ 移动优先：默认手机，逐步增强 */
.grid { grid-template-columns: 1fr; }           /* 手机：1 列 */

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }     /* 平板：2 列 */
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }  /* PC：4 列 */
}

/* ❌ 反过来：默认 PC，逐步覆盖（代码冗余） */
.grid { grid-template-columns: repeat(4, 1fr); }    /* PC：4 列 */

@media (max-width: 1024px) {
  .grid { grid-template-columns: 1fr 1fr; }         /* 覆盖 */
}

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }             /* 再覆盖 */
}

🧠 移动优先的好处：手机端最简单，逻辑清晰。反过来会导致大量覆盖代码，且容易遗漏。

五、流式单位：em/rem/vw/vh/%

单位	相对谁	最佳场景
`%`	父元素	宽度、简单比例
`em`	当前元素的 `font-size`	组件内部间距（`padding: 1em`）
`rem`	根元素 `<html>` 的 `font-size`	全局字号、间距
`vw`	视口宽度（1vw = 宽度的 1%）	全屏大标题
`vh`	视口高度（1vh = 高度的 1%）	全屏高度

代码示例

/* 固定 px（不响应） */
.box { width: 300px; font-size: 16px; }

/* 流式（响应） */
.box { width: 80%; max-width: 1200px; }     /* 宽度随父元素变化 */
html { font-size: 16px; }
.box { font-size: 1rem; padding: 1.5rem; }   /* 字号随根元素 */
.hero { height: 100vh; }                      /* 始终占满屏幕高度 */
.title { font-size: 5vw; }                    /* 字号随屏幕宽度变化 */

px vs rem 的选择

/* 字体：用 rem（方便用户调整浏览器字号） */
body { font-size: 1rem; }

/* 边框：用 px（不需要缩放） */
.card { border: 1px solid #ccc; }

/* 间距：用 rem 或 px 都行 */
.card { padding: 1rem; }

六、max-width：防止过宽

在大屏上，内容如果不限制宽度，会铺满整个屏幕，阅读体验很差。

/* 内容区最大 1200px，居中 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

这样在 1920px 宽的大屏上，内容区只有 1200px，两侧留白，阅读舒适。

七、动手练：让数据看板响应式

在上一篇的数据看板基础上，加媒体查询，让它在不同屏幕上都好看。

在原有 CSS 后面追加以下代码：

/* ===== 平板（≤ 1024px）：4 列 → 2 列 ===== */
@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
  }

  .panel-chart {
    grid-row: auto;          /* 取消占两行 */
    grid-column: 1 / -1;    /* 横跨两列 */
    min-height: 200px;
  }
}

/* ===== 手机（≤ 768px）：2 列 → 1 列 ===== */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px;
  }

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-header h1 {
    font-size: 18px;
  }

  .panel .value {
    font-size: 28px;
  }
}

验证方式：F12 → 设备模拟器（Ctrl+Shift+M）→ 切换 iPhone / iPad / 桌面，观察布局变化。

八、常见坑点与最佳实践

坑 1：移动端忘了加 viewport meta

<!-- ⚠️ 移动端必须加这行，否则手机会把页面缩小成 PC 比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

坑 2：固定 px 导致移动端溢出

/* ❌ 固定 1200px，手机屏幕只有 375px → 溢出 */
.container { width: 1200px; }

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

坑 3：媒体查询顺序错误

/* ❌ 后面的 768px 覆盖了前面的 480px */
@media (max-width: 480px) { .card { width: 100%; } }
@media (max-width: 768px) { .card { width: 50%; } }  /* 覆盖了上面的！ */

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

最佳实践清单

[x] 移动端必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">
[x] 用 max-width 限制内容宽度，防止大屏过宽
[x] 字体用 rem，宽度用 %，高度用 min-height
[x] 媒体查询用移动优先（min-width）或从大到小（max-width），不要混用

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

大屏专用 vs 管理后台

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

/* 管理后台：做响应式，PC 和手机都能用 */
.admin { max-width: 1400px; width: 95%; }

响应式看板 = 工业大屏雏形

/* 看板在不同设备自动调整列数 */
.dashboard { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .dashboard { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .dashboard { grid-template-columns: 1fr; }
}

十、自测挑战 10 题

什么是响应式设计？核心思想是什么？
@media (max-width: 768px) 的含义是什么？
移动优先（Mobile First）的含义是什么？怎么写？
em、rem、vw、vh 分别相对于谁？
max-width: 1200px 配合 margin: 0 auto 的作用是什么？
写出让 4 列网格在手机端变成 1 列的媒体查询代码。
把数据看板的手机端断点从 768px 改成 480px，观察效果。
用 rem 单位改写数据看板标题的字号。
vw 和 % 的区别是什么？
用 F12 设备模拟器，切换 iPhone SE / iPad / 4K 显示器，观察数据看板的变化。

加分挑战：在数据看板中加一个"返回顶部"按钮，在手机端显示、PC 端隐藏。

十一、总结

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

[x] 写出 @media 媒体查询基本语法
[x] 说出 4 个常用断点（480/768/1024/1366）
[x] 理解移动优先（Mobile First）的含义
[x] 使用 em、rem、vw、vh、%、max-width
[x] 让数据看板在手机和平板上自动重排

一句话带走：响应式 = 媒体查询 + 流式单位 + 移动优先。一个页面，一套代码，适配所有屏幕。

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

【HTML+CSS】day11-responsive-basics