UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Breakpoint Recomposition, Not Scaling

Responsive design should recombine layout relationships at breakpoints instead of scaling everything by viewport.

breakpointsresponsivelayout

Design Principle

Scaling type and containers causes unpredictable overflow; recomposition is more stable.

Principle Scaling type and containers causes unpredictable overflow; recomposition is more stable.

Design action Use CSS grid/flex breakpoints, minmax, clamped widths, and stable dimensions; do not scale font size with viewport width.

Examples Positive example: Card grids, toolbars, tables, and canvases. Counterexample: Body text uses viewport-width font sizing.

Apply when Card grids, toolbars, tables, and canvases. Content length is unpredictable.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Use CSS grid/flex breakpoints, minmax, clamped widths, and stable dimensions; do not scale font size with viewport width.

Apply When

  • Card grids, toolbars, tables, and canvases.
  • Content length is unpredictable.

Avoid

  • Body text uses viewport-width font sizing.
  • Buttons resize and shift as labels change.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
82%
Version
v1
Published
6/6/2026