Responsive Design

Media Queries

Media queries apply styles based on viewport characteristics. Width-based breakpoints are most common, but you can also query height, orientation, resolution, and prefers-color-scheme.

Write min-width queries for mobile-first design — start with base mobile styles and add complexity as the viewport grows. This avoids overriding desktop styles with mobile overrides.

• Common breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
• Prefer content-driven breakpoints over device-specific ones
• Use orientation: landscape for mobile layout adjustments

/* Mobile-first: base styles for small screens */
.grid { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Mobile-first Strategy

Mobile-first means designing for the smallest screen first, then progressively enhancing for larger viewports. This forces prioritization of content and keeps CSS lean.

Start every component as a single column. Add columns, sidebars, and multi-column text only when space allows. This approach naturally produces simpler, faster pages.

.article-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .article-layout {
    grid-template-columns: 1fr 280px;
  }
}

Fluid and Relative Units

Relative units scale with context. rem scales with root font size — use it for spacing and typography. em scales with the element font size. Percentage is relative to the parent. vw and vh are viewport-relative.

Clamp combines minimum, preferred, and maximum values for truly fluid typography and spacing that scales smoothly without discrete breakpoints.

• Set html { font-size: 100% } to respect user font-size preferences
• Avoid vw for body text — it ignores user zoom settings
• clamp() eliminates the need for many typography breakpoints

html { font-size: 100%; }

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
}

.section {
  padding: clamp(1rem, 5vw, 4rem);
}

Responsive Images and Media

Images should never overflow their containers. Max-width: 100% with height: auto is the baseline. The HTML picture element and srcset attribute serve appropriately sized images for different viewports.

Aspect-ratio CSS property reserves space before images load, preventing layout shift. Combine it with object-fit: cover for consistent thumbnail dimensions.

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

Container Queries vs Media Queries

Media queries respond to viewport size. Container queries respond to a parent container size — enabling truly component-level responsive design. A sidebar widget can reflow based on its column width, not the page width.

Use @container alongside container-type: inline-size on the parent. This is the future of responsive CSS and eliminates many prop-drilling breakpoint hacks in component libraries.

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

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