你可能会说
手机和电脑上想用不一样的排版，怎么设
屏幕宽度到了某个数，页面就换一套排版
大白话解释
断点就是几条「屏幕宽度线」。页面宽度跨过这条线，排版规则就换一套：手机上一列，超过 768 像素变两列，再宽变三列。
它像路口的信号灯切换规则，车流到了某个量级就换一套通行方式，免得堵成一锅粥。
常见的那几个数是 640、768、1024、1280，大致对应手机、平板竖屏、平板横屏、笔记本和台式机。
什么时候会遇到
- 写样式时那句媒体查询里的最小宽度 768 像素，那个数就是断点。
- 设计师给了「移动端」和「桌面端」两版稿，中间那条分界线就是断点。
- 调页面时发现平板横屏那一档特别难看，多半是断点没设好。
- 用 Tailwind 时写的前缀 md 和 lg，对应的就是断点。
- 组件库自带 sm、md、lg 那一套尺寸，你要和自己的设计对齐。
- 用户用折叠屏或者大屏手机，刚好卡在两个断点之间，样式来回跳。
可以直接对 Agent 说
「项目现在只在 768px 设了一个断点，平板横屏很难看。帮我加上 1024 和 1280 两档，让布局从两列过渡到三列再到四列，改完把媒体查询那部分贴出来。」
「检查 src/styles 里所有用到的断点数值，帮我统一成 640、768、1024、1280 这四档，有特殊值的先列出来让我确认。」
「这个卡片列表在 900 到 1000 像素之间会挤成上下两层，帮我把断点挪到 960，或者改用自适应列宽，你选一个更稳的方案并说明理由。」
正文里带下划线的词，是本站其它词条的入口；这一篇自动链了 2 个相关术语。
最容易想岔的地方
常见的错误理解： 断点就是照搬那几个常见宽度，手机 768、平板 1024
更准确的理解： 断点该定在「你的布局开始挤坏」的那个宽度。内容不一样断点就不一样，照抄数字反而会在别的尺寸上出问题
常见的错误理解： 断点越多，适配得越精细
更准确的理解： 断点越多，要维护的版本就越多。多数页面三四个足够，中间那些尺寸让它自然伸缩就行
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
你的布局在窗口宽度缩到 768px 附近时突然错乱。
首先应该检查什么？
-
断点就是样式切换的门槛。刚好在某个宽度炸掉，几乎都说明这个门槛附近的规则有缺口。
-
问题随宽度出现、随宽度消失，跟浏览器版本无关。版本问题不会这么精确地卡在某个像素值。
-
图片大小影响加载速度，不会让布局在某个特定宽度突然跳变。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 断点的定义在上面已经讲过了。