canon-responsive

CANON · Responsive Design

Mobile-first is non-negotiable. Container queries beat media queries for component-level responsiveness. Fluid type beats stepped breakpoints for headings.

Quantified Rules

Breakpoints

/* Mobile-first: base styles target the smallest screen */
/* Default: < 640px */

@media (min-width: 640px)  { /* sm — large phone, small tablet */ }
@media (min-width: 768px)  { /* md — tablet portrait */ }
@media (min-width: 1024px) { /* lg — tablet landscape, small laptop */ }
@media (min-width: 1280px) { /* xl — laptop */ }
@media (min-width: 1536px) { /* 2xl — large desktop */ }

These match Tailwind defaults and align with common device widths. Don't invent breakpoints unless the design demands it.

Use min-width, not max-width. Mobile-first means base styles work everywhere, breakpoints add complexity at larger sizes.

Container Widths

Container	Mobile (<640)	Tablet (768)	Desktop (1280+)
Page horizontal padding	16–24px	32–48px	48–80px
Prose max-width	100%	65ch	65ch
Marketing max-width	100%	100%	1200–1280px
App max-width	100%	100%	1440–1600px

Fluid Type

Use clamp() for headings that scale smoothly between mobile and desktop:

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  /*           min,    preferred,    max */
}

Heading	Fluid range
H1 (marketing)	clamp(2rem, 5vw + 1rem, 4.5rem) (32–72px)
H1 (app)	clamp(1.75rem, 3vw + 0.5rem, 2.25rem) (28–36px)
H2	clamp(1.5rem, 3vw + 0.5rem, 2.25rem) (24–36px)
H3	clamp(1.25rem, 2vw + 0.5rem, 1.75rem) (20–28px)
Body	16px (don't scale body)

Rule: scale headings, not body text. Body stays 16px across all sizes for reading consistency.

Container Queries (preferred over media for components)

.card-grid {
  container-type: inline-size;
}

.card {
  /* default: 1 column */
  display: block;
}

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}