响应式不是“为每个屏幕写一套页面”，而是用同一套结构，借助媒体查询在不同宽度下微调样式。这里有两个关键：一是写法的方向（移动优先还是桌面优先），二是断点选在哪里。这篇把两件事讲清楚，并给出一套可以直接抄走的断点方案。

一、先加 viewport，再谈响应式

没有 viewport 元标签，手机浏览器会把页面当成桌面宽度渲染再缩放，媒体查询也就失去了意义。每个页面 head 里都必须有这一行：

<meta name="viewport"
      content="width=device-width, initial-scale=1">

• width=device-width：让视口宽度等于设备宽度。
• initial-scale=1：初始缩放为 1，避免出现意外的放大。

二、媒体查询的基本语法

媒体查询用 @media 包住一段样式，只有在条件满足时才生效。最常用的是 min-width 和 max-width：

/* 视口宽度 ≥ 768px 时生效 */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 视口宽度 ≤ 767px 时生效 */
@media (max-width: 767px) {
  .nav { display: none; }
}

注意 min-width 和 max-width 的边界差 1px，避免同一条尺寸被两个查询同时命中。也可以用 and 组合区间：

/* 平板区间：768px ~ 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

三、移动优先 vs 桌面优先

这是响应式最重要的取舍，决定了你默认写谁、再用媒体查询往哪个方向扩展。

移动优先：默认样式写给小屏，用 min-width 向上扩展。样式是“叠加”的，越往大屏规则越多，优先级天然合理。这是目前主流推荐写法。

/* 默认：手机，单列 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
/* ≥768px：平板，两列 */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
/* ≥1024px：桌面，三列 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}

桌面优先：默认写给大屏，用 max-width 向下收缩。如果你是在老项目上加移动端适配，这种写法更顺手，但容易出现“先写满再覆盖”的冗余。

四、一套够用的断点方案

断点不要照搬某个框架的固定数值，而要按“内容在哪个宽度开始挤”来定。下面这套覆盖了绝大多数日常场景，可以直接用：

/* 默认：手机 ≤ 767px */
:root { --container: 100%; }

/* 平板 ≥ 768px */
@media (min-width: 768px) {
  :root { --container: 720px; }
}

/* 桌面 ≥ 1024px */
@media (min-width: 1024px) {
  :root { --container: 960px; }
}

/* 大屏 ≥ 1280px */
@media (min-width: 1280px) {
  :root { --container: 1200px; }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

核心就四个档：手机、平板、桌面、大屏。断点越少越好维护，别每差 100px 就加一个，那样媒体查询会爆炸式增长。

五、响应式排版与图片

除了布局，字号和图片也要跟着屏幕变。字号用 clamp() 一行搞定，它接受最小值、理想值、最大值，会随视口平滑变化：

h1 {
  /* 最小 24px / 理想 5vw / 最大 42px */
  font-size: clamp(24px, 5vw, 42px);
}
p {
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.8;
}

图片则统一限制最大宽度，并按容器自适应，避免在小屏溢出：

img {
  max-width: 100%;
  height: auto;
  display: block;
}

需要按屏幕加载不同尺寸图时，用 <picture> 配合 source，让浏览器自己挑：

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)"  srcset="hero-tablet.jpg">
  <img src="hero-mobile.jpg" alt="封面图">
</picture>

六、常见踩坑提醒

• 断点写太细：iPhone 多宽就加一个断点，结果维护不动。按内容断点，不按具体机型。
• 方向混用：一会儿 min-width 一会儿 max-width，覆盖关系混乱。一个项目里固定一种方向。
• 固定宽度溢出：给元素写死 width: 1200px，手机上横向滚动。多用 max-width / 百分比 / fr。
• 忘了测试：媒体查询写完不真机拖拽验证，经常有“某个区间没覆盖到”的漏洞。

响应式的核心不是技术多高级，而是“克制地差异化”。能在小屏和大屏之间少写几个特例，就说明你的断点选对了。下一课我们给页面加点温度——交互动效。