responsive-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive Design

响应式设计

This skill covers responsive design principles — mobile-first development, appropriate breakpoints, touch-friendly targets, and adaptive layout patterns.

本技能涵盖响应式设计原则——移动端优先开发、合适的断点设置、触摸友好的目标区域以及自适应布局模式。

Use-When

适用场景

This skill activates when:

Agent builds page layouts or components
Agent adds responsive breakpoints
Agent designs for mobile devices
Agent creates touch-friendly interactions
Agent converts desktop-only designs to responsive

当以下情况触发本技能：

Agent构建页面布局或组件
Agent添加响应式断点
Agent为移动设备进行设计
Agent创建触摸友好的交互效果
Agent将仅适配桌面端的设计转换为响应式设计

Core Rules

核心规则

ALWAYS use mobile-first approach (base styles for mobile, media queries for larger)
ALWAYS ensure touch targets are at least 44x44px
ALWAYS design for smallest screen first, then enhance
NEVER rely solely on device detection (use feature detection)
ALWAYS test at actual breakpoints, not just resize the browser

始终采用移动端优先的方法（基础样式适配移动端，通过媒体查询适配更大屏幕）
始终确保触摸目标区域至少为44x44像素
始终先针对最小屏幕进行设计，再逐步增强
绝不单纯依赖设备检测（使用特性检测）
始终在实际断点下进行测试，而非仅通过缩放浏览器测试

Common Agent Mistakes

Agent常见错误

Desktop-first approach leading to mobile afterthought
Touch targets too small (buttons, links under 44px)
Fixed widths that break on smaller screens
Not considering landscape orientation on mobile
Hiding content instead of adapting it

采用桌面端优先的方法，导致移动端设计成为事后补充
触摸目标区域过小（按钮、链接小于44像素）
使用固定宽度，在小屏幕上出现布局断裂
未考虑移动端的横屏显示情况
隐藏内容而非对其进行适配

Examples

示例

✅ Correct

✅ 正确示例

tsx

// Mobile-first: base styles for mobile, enhance for larger
<div className="w-full md:w-1/2 lg:w-1/3">
  <Button className="w-full md:w-auto h-11">
    Submit
  </Button>
</div>

// Touch-friendly targets (min 44px)
<button className="min-h-[44px] min-w-[44px] px-4 py-3">
  Tap Here
</button>

tsx

// Mobile-first: base styles for mobile, enhance for larger
<div className="w-full md:w-1/2 lg:w-1/3">
  <Button className="w-full md:w-auto h-11">
    Submit
  </Button>
</div>

// Touch-friendly targets (min 44px)
<button className="min-h-[44px] min-w-[44px] px-4 py-3">
  Tap Here
</button>

❌ Wrong

❌ 错误示例

tsx

// Desktop-first
<div className="w-1/2">
  <button className="p-1">Click</button>
</div>

// Touch target too small
<button className="p-2 text-sm">
  Too small
</button>

tsx

// Desktop-first
<div className="w-1/2">
  <button className="p-1">Click</button>
</div>

// Touch target too small
<button className="p-2 text-sm">
  Too small
</button>