为什么需要响应式

你在电脑上做了一个漂亮的网站，手机上一打开——所有内容缩成一团，字小得看不见

传统网页按 980px 宽度设计
手机屏幕只有 320-414px
→ 网页被缩小显示
→ 文字小得看不见
→ 按钮太小，点不准

67% 流量来自移动设备
53% 用户 3 秒内离开慢页面
Google 优先排名移动友好网站

→ 不做响应式 = 丢掉一半用户

响应式三步曲

从基础到精细，三块核心技术层层递进

Part 1: 视口设置

建房子先打地基——响应式的地基就是视口元标签。

视口元标签

没有这行代码，手机会把你的 980px 网页缩小到 375px 宽——字小得看不见

<head>
  <!-- 这行是响应式的第一步 -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1">
</head>

Part 2: 流式布局

让元素像水一样流动，自动适应容器大小。

固定 vs 流式

固定宽度在手机上溢出，在大屏上浪费空间——流式布局解决这两个问题

.container {
  width: 960px; /* 固定宽度 */
  margin: 0 auto;
}

/* 手机：溢出，需要滚动 */
/* 大屏：两边大量留白 */

.container {
  width: 90%;        /* 相对父元素 */
  max-width: 1200px;  /* 最大宽度 */
  margin: 0 auto;
}

/* 手机：自动变窄 */
/* 大屏：最宽1200px */

流式四法则

容器、间距、图片、字体——四个维度全面告别固定像素

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 随根字体缩放 */
.section {
  padding: 2rem;
}

/* 更好：结合视口单位 */
.section {
  padding: clamp(1rem, 5vw, 3rem);
}

img {
  max-width: 100%;
  height: auto;
}
/* "可以变小，不能变大"
   保持原始宽高比 */

/* rem 相对单位 */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

/* clamp 平滑过渡 */
h1 {
  font-size: clamp(
    1.5rem, 4vw, 2.5rem);
}

Part 3: 媒体查询

流式布局让元素变窄，但无法改变布局结构。媒体查询就是"智能皮肤"——感知设备，定制样式。

媒体查询语法

用 @media 写条件判断——"当屏幕宽度至少 768px 时，应用这些样式"

/* 移动端默认样式 */
.container { padding: 1rem; }
.columns { flex-direction: column; }

/* 平板及以上（≥768px） */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .columns { flex-direction: row; }
}

/* 桌面（≥1024px） */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

移动优先策略

先写手机样式，再用 min-width 逐步增强——为什么这是推荐做法？

/* 默认 = 桌面 */
.container {
  width: 1200px;
}

/* 再为手机覆盖 */
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

/* 默认 = 手机 */
.container {
  width: 100%;
}

/* 逐步增强 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

Part 4: 综合实战

把三块积木组合起来，构建一个完整的响应式页面。

响应式卡片网格

用 Grid + auto-fit + minmax 实现自动适应的卡片布局

/* 卡片网格：自动响应式 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* 响应式字体 */
h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* 响应式间距 */
.section {
  padding: clamp(1rem, 3vw, 2rem) 0;
}

<!-- 视口设置 -->
<meta name="viewport"
  content="width=device-width, initial-scale=1">

<!-- 流式容器 -->
<div class="container">
  <div class="cards">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

响应式导航

手机上汉堡菜单，桌面端水平导航——这是最常见的响应式模式

/* 默认（手机）：汉堡菜单 */
.nav-menu { display: none; }
.hamburger { display: block; }

/* 平板及以上：水平导航 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
  .hamburger {
    display: none;
  }
}

最佳实践速查

五个黄金法则，避三个常见坑

<!-- 手机加载小图，大屏加载大图 -->
<picture>
  <source media="(max-width: 600px)" srcset="mobile.jpg">
  <img src="desktop.jpg" alt="封面">
</picture>

测试与调试

写完了响应式代码，怎么确保它在所有设备上都工作？

/* 调试技巧：在页面上显示当前断点 */
body::after {
  content: "当前尺寸";
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 5px 0 0 0;
  z-index: 9999;
}

@media (min-width: 768px) {
  body::after { content: "平板 ≥768px"; }
}
@media (min-width: 1024px) {
  body::after { content: "桌面 ≥1024px"; }
}

动手练习