SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场responsive-design

responsive-design

前端与建站

查看项目

更新于 10-15 16:27

技能介绍

用途

Responsive Design 是一个面向 Web 界面的、以路由优先的响应式布局策略与验证技能。它的定位不是输出通用 CSS 配方或粘贴框架代码片段，而是在任务需要「命名出错的响应式表面、选择最小可行的适配包、并留下简短策略 + 验证说明」时发挥作用。

主要能力

技能围绕响应式故障的分类与路由展开，包含以下主要包：

  • page-layout：页面外壳、导航/侧边栏位移、网格列、间距密度、视口断点。
  • component-slot：随父容器宽度变化的可复用卡片/面板/模块行为；使用容器查询或组件内在布局规则。
  • dense-data：表格、工具栏、筛选栏、仪表盘，以及有意的回退选择（如摘要、展开、横向滚动）。
  • media-behavior：图片/视频/嵌入尺寸、srcset / sizes、宽高比、裁剪策略和艺术方向边界情况。
  • verification-reflow：缩放、回流、溢出、长标签、本地化，以及发布前截图对比与人工跟进。

技能还维护一组不变量：移动优先默认仍是最安全的特性交付基线；内在布局在能干净解决问题时优于断点蔓延；视口规则负责页面外壳变化，容器规则负责可复用槽位适配；断点应反映内容压力而非设备品牌名；密集表格/工具栏是特例，通常需要显式回退选择；响应式媒体需要刻意的 srcset / sizes / aspect-ratio 思考，而不只是 width: 100%；缩放/回流和长文案压力是验证要求而非事后补丁。

使用方式

技能按步骤引导：

Step 1：在命名 CSS 之前先框定响应式任务，捕获最小录入包，包括 surface、workflow_type、primary_packet、pressure_source、signal_source、confidence。规则是先标记出错的响应式表面，而不是一开始就「再加一个断点」。

Step 2：只选择一个主要响应式包，从 page-layout、component-slot、dense-data、media-behavior、verification-reflow 中挑选当前决策杠杆最高者，其余列为跟进项而非并列共同负责项。

Step 3：保持不变量可见。

Step 4：构建响应式策略包，输出包含 Scope、Current signal、Recommended first slice、Layout decisions、Verification plan、Ownership and route-outs 的结构。

Step 5：使用包而非冗长 CSS 教程。

Step 6：将机制选择与归属选择分开。机制包括内在布局、视口查询、容器查询、响应式媒体规则、回退呈现；归属则包括 responsive-design、design-system、web-accessibility、react-best-practices 等。如果请求来自截图、QA 备注或「移动端坏了」的报告，应明确说明截图只是信号产物，不是完整的响应式策略。

Step 7：显式路由相邻工作。例如可复用原语 API、变体蔓延、槽位归属、组件结构路由到 design-system；语义、键盘/焦点、标签、对比度、动效或无障碍重度修复路由到 web-accessibility；跨产品的共享断点令牌、系统级密度规则、前端标准路由到 design-system；宽泛的发布就绪 UI 评审路由到 web-accessibility；水合、重渲染抖动、客户端边界成本或运行时性能路由到 react-best-practices。

适用场景

  • 团队说「这个页面在移动端坏了」，但真正的响应式表面仍不清楚。
  • 仪表盘、导航、表单、卡片网格、定价页、表格或嵌入内容在添加更多断点之前需要响应式策略。
  • 需要判断修复应归属于视口布局规则、容器查询、内在布局、响应式媒体处理，还是验证/回流跟进。
  • 发布就绪检查发现溢出、换行、密度或缩放/回流失败，需要的是有边界的一个包，而不是一场 CSS 讲座。
  • 请求混合了页面级适配、组件复用和密集数据压力，需要在实现前进行路由。

限制

技能明确列出不适合的场景：主要任务是可复用原语/槽位/变体 API 设计或组件族归属时，应转到 design-system；主要任务是键盘/焦点行为、语义、标签、对比度、减弱动效或无障碍重度修复时，应转到 web-accessibility；主要任务是断点治理、令牌策略或跨产品响应式标准时，应转到 design-system；主要任务是跨多维度的宽泛 UI 批评、打磨、启发式评审或发布就绪审计时，应转到 web-accessibility；主要任务是 React 水合、重渲染抖动或客户端边界性能行为时应转到 react-best-practices；如果响应式策略已经清晰、只是实现工作，则直接实现而不必重新运行路由器。

最佳实践

从出错的响应式表面开始，而非语法技巧；在添加另一个断点之前优先使用内在布局；保持视口与容器归属明确；把表格、工具栏和密集仪表盘视为值得单独成包的特例；把截图和设备模式检查视为输入而非完成证明；保持验证诚实，缩放、回流、长文案和溢出仍然重要；不确定时显式路由相邻前端工作，而不是膨胀本技能。

参考

技能列出 MDN: Responsive design、MDN: Using media queries、MDN: Container queries、MDN: Responsive images、web.dev: Learn Responsive Design、W3C WAI: Understanding Reflow 作为参考资料。技能本身未提供官网地址、定价、收费方式或安装命令等信息。