响应式设计并不等于"多写几个媒体查询"。很多开发者照搬 Bootstrap 的四档断点，结果代码里堆满了 @media，维护起来痛苦不堪。其实，断点该怎么选、选几个，背后有一套清晰的方法论。本篇从尧图建站的项目经验出发，聊聊断点选择的正确姿势。

一、断点的本质是内容而非设备

最常见的误区是"按设备宽度定断点"——iPhone 是 375px、iPad 是 768px、桌面是 1200px。这种思路的问题在于：设备分辨率每年都在变，今天按 iPhone 13 定的断点，明天可能就失准。正确的做法是"按内容断裂点定断点"。

所谓内容断裂点，是指当你把浏览器窗口从宽拖到窄，页面内容在某一个宽度开始"看起来不舒服"了——文字挤成一团、卡片错位、图片溢出——这个临界宽度就是该设断点的地方。可以先去掉所有媒体查询，把页面从 320px 一路拖到 1920px，记录下所有"不舒服"的宽度，这些才是真正需要的断点。

• 设备断点：跟着具体机型走，易过时，不推荐。
• 内容断点：跟着布局表现走，稳定通用，推荐。
• 断点数量：通常 2-4 个即可，过多说明布局本身有问题。

二、主流断点方案对比

目前业界有两套思路：一套是 Bootstrap 的"桌面优先"四档（576/768/992/1200），另一套是现代 CSS 推崇的"移动优先"且断点更少。在尧图，我们倾向于后者——移动优先，断点控制在 3 个以内。

/* 移动优先：默认样式针对手机，逐步增强 */
.card {
  padding: 16px;          /* 默认：手机 */
}
@media (min-width: 768px) {
  .card { padding: 24px; }   /* 平板 */
}
@media (min-width: 1024px) {
  .card { padding: 32px; }   /* 桌面 */
}

移动优先用 min-width（从小到大增强），桌面优先用 max-width（从大到小降级）。前者默认样式最精简、加载更快，且符合"移动端流量占比更高"的现实。两者的关键差异在于：移动优先是"加法"，每个断点只补充增强样式；桌面优先是"减法"，要先写完整桌面样式再逐个覆盖，代码冗余更多。

三、移动优先的实战写法

下面是一个企业官网导航的移动优先实现。手机端默认是折叠菜单，平板展开为水平菜单，桌面端再显示完整二级菜单。注意断点处用 min-width 逐级增强，而非一开始就写桌面样式。

/* 默认：手机端折叠菜单 */
.nav-menu { display: none; }
.nav-toggle { display: block; }

@media (min-width: 768px) {
  /* 平板：展开水平菜单 */
  .nav-menu { display: flex; gap: 20px; }
  .nav-toggle { display: none; }
}

@media (min-width: 1024px) {
  /* 桌面：显示二级菜单 */
  .nav-menu .has-sub .sub { display: block; }
}

最后强调一点：能用弹性单位（%、fr、vw、clamp()）解决的，就不要用媒体查询。比如字号用 clamp(16px, 4vw, 24px) 就能平滑缩放，完全不需要断点。断点是"兜底手段"，而非"首选工具"。把布局写得足够弹性，断点自然就少了。