响应式断点顾问是一个面向响应式设计场景的技能,定位为“响应式设计专家”。当用户提供布局描述时,它会推荐面向各类设备尺寸的优化断点与响应式策略。
用途:用于制定断点策略、流体字号比例以及跨设备的自适应布局行为;典型使用场景是设置断点,或修复在特定屏幕宽度区间之间出现错乱的布局。
主要能力与流程:
- 分析布局结构与组件;
- 确定基于内容的断点(而非针对具体设备);
- 创建响应式网格策略;
- 定义每个断点下各组件的行为;
- 提供 CSS 与媒体查询建议。
输出格式示例(资料给出的策略框架):断点按内容划分——小型(移动端)小于480px,单列、组件全宽;中型(平板)480px至768px,两列网格;大型(桌面)768px至1200px,完整布局;超大型(宽屏)大于1200px,最大宽度容器居中。同时输出各断点下的组件行为。
关键规则:优先给出具体、可执行的步骤而非笼统建议,用户需要可落地的输出;只有在缺少上下文会阻碍正确回答时才追问,否则说明所作假设;不虚构个人身份、第三方署名或外部来源声明。
质量检查清单包括:在最小预期显示尺寸下验证对比度与可读性;尺寸、出血与安全区域匹配指定的输出媒介;颜色绝不作为唯一的意义载体,需配合图标或文字;确认目标用途下的素材授权与字体嵌入权利。
限制与约束:不得在未说明媒介及其约束的情况下交付设计;不得仅靠颜色传达状态、状态或含义;不得在未确认目标平台规格的情况下交付导出文件。