F2.11.2adaptive layout snaps at breakpoints设计
自适应在断点处跳变
别名: 自适应布局 · adaptive layout · 断点跳变
概念解释
767 是汉堡导航，768 变成持久侧栏——盒子树换了，不是列被拉宽 1 px。**自适应（adaptive）**在断点处跳变：一列变两列、模块从下方搬到侧边、工具条改成顶栏。你设计的是 N 套结构，用户落在哪一套取决于宽度落在哪一段。
副作用：宽了 1 px，内容区反而变窄（侧栏吃掉 240 px），感觉像「变宽却更挤」。这是跳变特有的账，流式拉宽不会突然少掉一栏给壳。
机制
跳变改的是拓扑：谁是谁的邻居、几条流。适合信息架构必须换的时刻（手机没有空间给持久导航）。1 px 之差可以掉进完全不同的 IA，分屏、旋转、外接显示器会让人反复穿越那条线，结构来回翻。
跳变之间若完全不插值，槽里会出现被拉坏的那一套结构——那是「连续可用」要管的。自适应自己的机制是：结构在采样点之间保持同一拓扑，只在采样点换拓扑。
边界
只做几个固定画板、不允许用户改窗口的设备（某些展陈、某些 TV 应用）天生就是自适应。窗口可拖的桌面若只有自适应、中间完全不流，槽会很难看。用户拖着窗口找「刚好」，会在断点附近感到布局闪一下，这是跳变被看见了；若闪的是内容重排导致滚动位置丢失，伤害比闪一下大。
怎么落地
- 每个跳变写清换了什么拓扑（导航形态、列数、模块搬家），并保证更宽的那一套内容区不要无故变窄。
- 跳变时锚定内容身份（还在看同一行、同一字段），不要整页重挂到顶部。
- 验证：在每个断点下方 1 px、上方 1 px 各截一屏，做 diff。diff 应该对应那句拓扑变化，而且更宽的一屏用于内容的宽度不应无理由更小。再用真机或模拟器在断点附近来回旋转、分屏，看结构是否抖动、滚动位置是否还在。