移动端响应式布局：让布局在手机到桌面间真正重排而非缩小

当任务涉及需要适配多种屏幕宽度的响应式/移动端布局（断点、缩放、网格、溢出、点击目标、导航）时，用这套规则避免把桌面布局硬塞进手机。

适用场景

解决思路

1. 在内容真正开始失效的宽度处设置断点，而不是按设备型号（375px、414px、768px）命名；通过不断缩窄视口观察布局在哪里崩掉，把断点设在那里。
2. 把移动端当作一个独立设计状态，而不是在桌面样式表末尾追加一小段媒体查询补丁；为窄视口单独定义尺寸与堆叠方式，并验证整个布局而非只验证被修补的地方。
3. 不要只做两态布局（单列 + 宽屏多列）；在内容需要的地方定义尽可能多的真实状态，典型重排是三态：单列 → 卡片过宽时的两列网格 → 真正放得下时的完整多列网格；拖动视口走完整个宽度范围来验证。
4. 给移动端单独的尺寸档位：更小的字号阶梯、更紧的区块内边距、更小的间距；除点击目标保持最小尺寸外，其余元素在断点处有意识地缩小。
5. 使用流式字号（clamp()）让字号随视口缩放，或在断点处设置更小的字号档位；在窄宽度下验证结果，而不只看桌面预览。
6. 区块高度用内容自适应（auto），或在确实需要满屏时用动态视口单位（dvh）；不要让 100vh 把下方内容意外挤出屏幕。
7. 在断点处把区块内边距降到移动端档位（大约减半或更少），检查页面滚动密度自然，而不是穿过大片空白。
8. 在断点处把多列网格折叠成单列重排，让并排变成堆叠，每项重新获得整行宽度，并在窄宽度下重新验证。
9. 用 minmax() 和 auto-fit / auto-fill 设置网格轨道，让列随内容收缩换行，并定义在断点处折叠的网格区域；网格默认流式，只在刻意需要固定尺寸处才刚性。
10. 让列数跟随内容：移动端通常一列、最多两列；只有布局确实有那么多并排内容时，12 列跨度才合理。
11. 找出比视口宽的元素（需要重排或滚动容器的表格、需要换行的代码块、需要 max-width: 100% 的图片），将其收容或重排，确保最窄目标宽度下整页零横向滚动。
12. 让内容重排而不是裁剪：允许容器增长、内容换行或在断点处折叠；只在裁剪本身就是设计意图时（如缩略图）才用 overflow: hidden。
13. 用相对单位设置子元素尺寸并允许换行（flex-wrap、流式宽度、网格子元素 min-width: 0），让子元素能随容器收缩，而不是保持桌面尺寸。
14. 给交互目标至少 44 x 44 px 的最小触摸区域，可用内边距或更大的命中框实现，即使视觉更小；在手机宽度下验证整套控件。
15. 在相邻交互目标之间留出清晰间隙（至少几 px，理想情况下手指按压区域不重叠），间距是可点击性的另一半。
16. 为每个仅悬停交互提供点击等价物：悬停打开的菜单也能点击打开，悬停显示的内容也能点击显示，交互元素显示可见的 :active 反馈；只用触摸来测试 UI。
17. 在断点处把导航折叠成移动端模式：少数主要目的地用底部导航，其余用菜单；链接从一行中重排出来，主要目的地保持一个拇指点击可达，并在窄宽度下验证。
18. 保持菜单可发现：给汉堡图标加标签（如 "Menu"），或保持主要目的地可见、只隐藏次要项；如果菜单是到达重要功能的唯一途径，这种可达性必须显而易见。
19. 为固定底栏预留高度：页面滚动内边距和设备需要的 safe-area insets，确保重要内容不被遮挡；在窄宽度下验证最后一项可达。
20. 保持固定导航紧凑：小到内容仍占主导，必要时在滚动时折叠或收缩；导航应存在，而不是占据屏幕主体。
21. 在移动端或响应式布局任务中，配合核心 Delivery Gate 运行 Layoutmobile 检查清单，所有项都必须为「是」：布局重排为独立移动状态、宽度范围内有定义的状态、使用移动端尺寸档位、网格折叠堆叠、无横向溢出与裁剪、目标至少 44 x 44 px 且有间距、悬停交互有点击等价物、导航重排为移动模式、固定导航不遮挡内容且尊重安全区、在移动断点处验证过布局。

适用边界 · 注意事项

• 任务与布局无关（如纯逻辑、数据处理、后端代码）时不适用。
• 布局只面向单一固定宽度、明确不需要响应式的场景（如固定尺寸的嵌入式控件）时不适用。
• 需要依赖特定框架或设计系统组件库才能实现的场景，本规则只提供通用原则。