git:20260529.c76cc44 to git:20260611.9d7f5e4

17 added, 17 removed. Audit A to A.

---

name: fec-responsive-layout

- description: Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include 响应式布局, 移动端适配, 断点, 容器查询, 横竖屏, 触摸目标.

+ description: Use when designing, implementing, or reviewing responsive frontend layouts, mobile-first breakpoints, container queries, fluid grids, data-dense tables, touch targets, safe areas, orientation changes, viewport overflow, or cross-device UI behavior; Chinese triggers include responsive layouts, mobile-side adaptation, breakpoints, container queries, horizontal and vertical screens, touch targets.

---

- # 响应式布局

+ # Responsive layout

- 适用于需要让页面、工具界面、表格、仪表盘或组件在多设备上稳定工作的前端任务。需要布局模式和检查清单时加载 [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md)。

+ Suitable for front-end tasks that require pages, tool interfaces, tables, dashboards or components to work stably on multiple devices. Load [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md) when layout patterns and checklists are required.

## Purpose

- 用内容优先、移动优先和容器感知的方式设计响应式布局，避免只靠固定断点修补溢出。

+ Design responsive layouts in a content-first, mobile-first, and container-aware manner to avoid relying solely on fixed breakpoints to fix overflow.

## Procedure

- 1. 明确信息优先级：小屏先保留核心任务、关键操作和反馈；次要信息折叠、延后或移入详情层。

- 2. 选择布局策略：简单页面用 mobile-first 断点；嵌套组件、卡片网格和侧栏优先考虑 container query。

- 3. 设计流式尺寸：用 `minmax()`、`clamp()`、`aspect-ratio`、`max-width`、`min-width: 0` 和稳定网格轨道控制伸缩。

- 4. 处理数据密集界面：表格、列表、看板和编辑器需要明确横向滚动、列优先级、冻结列或移动端摘要视图。

- 5. 保证触摸与键盘：触摸目标、焦点路径、hover 替代、虚拟键盘、安全区域和横竖屏切换都要复核。

- 6. 关联性能与资源：移动端减少首屏大图、重型图表、同步动画和不必要列渲染。

- 7. 验证断点之间：检查 375px、768px、1024px、1440px，以及断点中间值是否溢出、遮挡或跳变。

+ 1. Clarify the priority of information: On small screens, core tasks, key operations and feedback are retained first; secondary information is folded, postponed or moved to the detail layer.

+ 2. Choose a layout strategy: use mobile-first breakpoints for simple pages; give priority to container query for nested components, card grids and sidebars.

+ 3. Design flow size: use `minmax()`, `clamp()`, `aspect-ratio`, `max-width`, `min-width: 0` and stable grid track to control scaling.

+ 4. Handle data-intensive interfaces: tables, lists, boards, and editors need to explicitly support horizontal scrolling, column prioritization, frozen columns, or mobile summary views.

+ 5. Ensure touch and keyboard: touch targets, focus paths, hover substitutions, virtual keyboards, safe areas, and horizontal and vertical screen switching should all be reviewed.

+ 6. Correlate performance and resources: The mobile terminal reduces first-screen large images, heavy charts, synchronized animations and unnecessary column rendering.

+ 7. Verify between breakpoints: check 375px, 768px, 1024px, 1440px, and whether the intermediate value of the breakpoint overflows, blocks, or jumps.

## Constraints

- - 不把桌面版缩小当作移动端设计。

- - 不让关键功能只依赖 hover 或宽屏侧栏。

- - 不用固定高度掩盖内容变化；需要固定格式时用稳定约束和可滚动区域。

- - 不用 viewport 字体缩放替代真实排版层级。

- - 不让移动端横向溢出成为默认解决方案；只有数据表、画布或编辑器等明确场景可以局部横滚。

+ - Don’t treat the desktop version downsized as a mobile design.

+ - Don’t make key features rely solely on hover or widescreen sidebars.

+ - Do not use fixed height to cover content changes; use stable constraints and scrollable areas when fixed format is required.

+ - Do not use viewport font scaling instead of real typography hierarchy.

+ - Do not make mobile horizontal overflow the default solution; only explicit scenes such as data tables, canvases or editors can partially scroll.

## Expected Output

- 输出响应式信息优先级、断点或容器策略、关键组件布局模式、触摸/键盘要求、数据密集区域处理方案和验证结果。完成后页面在常见视口和输入方式下不溢出、不遮挡、可操作。

+ Outputs responsive information prioritization, breakpoint or container strategies, key component layout patterns, touch/keyboard requirements, data-intensive area handling options, and validation results. After completion, the page will not overflow, not be blocked, and is operable under common viewports and input methods.