Responsive Layout

响应式布局

SKILL.md

--- frontmatter

id: responsive-layout
type: layout
priority: high
depends_on:
  - ux-ui-design
conflicts_with: []

Strategic Role

Guarantees usability across all devices.

Layout Philosophy

Design for smallest screen FIRST.

Mandatory Rules

1. Breakpoints

•Mobile (default)
•Tablet
•Desktop

2. Touch Design

•Minimum touch target 44px
•Adequate spacing

3. Flexibility

•Fluid grids
•No fixed widths

Output Artifacts

•Responsive layout rules
•Breakpoint logic

Enforcement

No desktop-only decisions allowed.