定义页面响应式契约
只解决跨断点行为,把多列、导航、媒体和溢出规则写成可验收契约。
使用判断
适用场景
桌面页面需要适配平板和移动端,且团队经常在实现后才发现溢出或操作区域失效时使用。
预期结果
得到每个页面区域跨断点的布局、降级和验收规则,移动端行为不再依赖猜测。
Prompt 快速复制
请为页面 {{page}} 定义响应式契约,不要修改视觉风格:
页面结构:{{structure}}
内容类型:{{content_types}}
目标断点:{{breakpoints}}
输出一张表:
| 区域 | 桌面布局 | 平板布局 | 移动布局 | 内容降级/折叠规则 | 验收方式 |
必须检查:
- 多列布局在移动端如何变为单列或滚动。
- 导航、按钮、表格和长文本是否仍可操作。
- 图片、视频和代码块是否保留比例并预留空间。
- 390px 宽度下不能产生页面级横向滚动。
禁止:只写“使用响应式 CSS”或把断点交给实现者猜测。使用说明
断点应与项目已有规范一致;没有既定断点时,至少补充 390px、768px 和桌面宽度的验收。