定义页面响应式契约

只解决跨断点行为,把多列、导航、媒体和溢出规则写成可验收契约。

Prompts 提示词场景 · 产品与需求设计更新 · 2026-09-09

使用判断

适用场景

桌面页面需要适配平板和移动端,且团队经常在实现后才发现溢出或操作区域失效时使用。

预期结果

得到每个页面区域跨断点的布局、降级和验收规则,移动端行为不再依赖猜测。

Prompt 快速复制

请为页面 {{page}} 定义响应式契约,不要修改视觉风格:

页面结构:{{structure}}
内容类型:{{content_types}}
目标断点:{{breakpoints}}

输出一张表:
| 区域 | 桌面布局 | 平板布局 | 移动布局 | 内容降级/折叠规则 | 验收方式 |

必须检查:
- 多列布局在移动端如何变为单列或滚动。
- 导航、按钮、表格和长文本是否仍可操作。
- 图片、视频和代码块是否保留比例并预留空间。
- 390px 宽度下不能产生页面级横向滚动。

禁止:只写“使用响应式 CSS”或把断点交给实现者猜测。

使用说明

断点应与项目已有规范一致;没有既定断点时,至少补充 390px、768px 和桌面宽度的验收。

出处