F2.10.1breakpoints from content failure not device names设计
断点应由内容失效点决定而非设备型号
别名: 内容断点 · content-driven breakpoint
概念解释
把断点设在 768，因为「那是平板」，表格却在 900 就已经挤到出现横向滚动——768 到 899 这段，你还在用桌面那套列，内容已经坏了。断点该标在布局开始撑不住的宽度，不该标在某年某款设备的营销名上。
流式还是跳变，是另一组的策略问题。容器查询管的是组件自己的宽，不是视口。这里只问视口断点这个数字从哪来。
机制
设备宽度是连续分布：同一「手机」差几十像素，分屏、桌面窗口、折叠屏更不必说。型号是稀疏的标签，不是布局的自变量。布局的自变量是模块的最小可用宽：表要放下关键列，导航要放下标签，三列卡要放下完整的一张。失效点因产品而异，所以断点不能从框架默认值抄。
抄设备名还有滞后：新机出来，你的 375 / 768 / 1024 不会自动跟着失效点走，只会假装覆盖了「所有设备」。
边界
操作系统自己的栏、键盘、分屏最小宽，有时会强迫你对齐某个系统断点，那是平台约束，仍应写成「系统壳在 W 会改结构」，而不是「iPad」。营销页只有一句口号加一张图，可能根本不需要断点，宽度跟着走就行。
打印、投影、墨水屏的失效点与发光屏幕不同，不要共用一条视口媒体查询应付所有输出。
怎么落地
- 从 320 拖到 1440，记下溢出、被裁切、出现半列、主按钮掉出视野的宽度。这些数才是候选断点。
- 现有断点若只能讲出设备名、讲不出失效的模块，删掉，让相邻失效点接管。
- 验证：做一张表，左列是当前断点，右列是「哪个模块在这里由坏变好」。右列写不出模块名的断点删除。再在失效点 ±10 px 各截一张，确认跨过该点后那个模块确实修好，而不是只换了背景色。