响应式断点：常用数值与如何选择

断点（breakpoint）是响应式布局改变结构时所对应的视口宽度。一组常见且稳妥的取值是：大屏手机约 640 px、平板 768 px、小尺寸笔记本 1024 px、桌面 1280 px，用 rem 写成 min-width 查询。更好的做法是把这组数值当作起点，再把断点移到你自己的内容开始显示不佳的位置，而不是去追逐设备尺寸。

常用断点一览

请用 rem 来写（40rem、48rem、64rem、80rem），这样用户调大默认字号时，断点也会随之移动。

主流框架的断点设置

它们的整体结构大致一致：在 600–768 左右切换到平板，在 1000–1200 左右切换到桌面，再加一到两个宽屏尺寸。详见 Tailwind 断点和 Bootstrap 断点。

为什么按设备设定的断点很快就过时

人们很容易把断点设在设备的精确宽度上：某款 iPhone 是 375，新款是 390，Plus 机型是 414。问题在于设备每年都在变。仅当前的 iPhone，宽度就从 375 到 440 个 CSS 像素不等（见 iPhone 屏幕尺寸与视口一览表），安卓手机又带来了更多宽度，折叠屏和分屏窗口则可能落在任何位置。

只在特定设备宽度下才正常的布局，会在这些宽度之间出问题。断点应该标出布局需要变化的位置，而在断点之间，布局应该是流式的。

如何根据内容选择断点

1. 先做最窄的布局，大约 320 px。
2. 在 Chrome DevTools 的 Responsive 模式中慢慢拉宽视口。
3. 当设计开始显得不对劲时停下：行太长、卡片被拉伸、放得下第二列，或者导航可以排成一行。
4. 在这个宽度加一个断点，取整为合理的 rem 值。
5. 重复以上步骤，直到你支持的最宽布局。

通常最后会有三到五个断点。如果超过六个，其中一些很可能是在修补组件层面的问题，而这些问题用容器查询或流式技术能处理得更好。

用流式技术减少断点

现代 CSS 让很多断点变得没有必要：

• grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) 会自动增减列数。
• flex-wrap: wrap 配合 flex-basis，可以在空间不足时让元素自动换行。
• clamp() 可以平滑缩放字号和间距：font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem)。
• width: min(100% - 2rem, 70rem) 一行就能创建带左右留白和最大宽度的容器。

断点留给结构性的变化：导航样式、页面列数、侧边栏位置。

断点与平板

断点选择在平板上表现得最明显。竖屏 iPad 的宽度因机型而异，在 744 到 1032 px 之间，所以可能落在 768 或 1024 的任意一侧。旋转屏幕后，它又会跨过另一个断点。平板要在两个方向上都测试，还要记住 iPad 上的 Safari 通常会请求桌面版网站。详见如何在 Chrome 中以 iPad 视图查看网站。

测试你的断点

• 在 DevTools 设备工具栏中开启 Show media queries，每个断点都会显示为一条横条；点击横条即可跳到对应宽度。
• 每个断点都在精确宽度和小 1 px 的宽度下各测一次。
• 不只测宽度，也要测具体的手机和平板机型。带设备预设的 Mobile View Extension 是在多种设备尺寸下快速浏览页面的最快方法。

完整方法见如何测试响应式设计。

常见问题

响应式设计的标准断点是多少？

没有官方标准。常用数值是 640、768、1024 和 1280 px（Tailwind），或 576、768、992、1200 和 1400 px（Bootstrap）。选定一套并始终如一地使用。

手机应该用哪个断点？

在移动优先的 CSS 中，手机不需要断点，直接使用基础样式。第一个断点通常在 480 到 640 px 之间，标志着布局可以开始利用更多空间。

一个网站应该有多少个断点？

通常是三到五个。断点之间使用流式布局，只在内容需要改变结构的地方添加断点。