Responsive Design

Explanation

Responsive design rests on three pillars: fluid grids (using % or fr units instead of fixed px for widths so layouts stretch and compress with the viewport), flexible images (max-width: 100% so images never overflow their container), and media queries (CSS rules that apply only above or below certain viewport widths, allowing layout changes at breakpoints). Mobile-first design is the best practice approach: write your base CSS for small screens, then add media queries with min-width to override styles for larger screens. This is the opposite of the older desktop-first approach (base styles for desktop, max-width overrides for mobile). Mobile-first produces cleaner code because mobile styles are simpler, and you're adding complexity as screen size grows rather than stripping it out. The viewport meta tag is a prerequisite: without , mobile browsers render pages at desktop width and scale them down, ignoring all your responsive CSS. This is the first thing to add to any HTML document. Modern CSS features reduce the need for explicit breakpoints: CSS Grid's auto-fill/minmax creates intrinsically responsive grids, CSS Container Queries let components respond to their container size (not the viewport), and clamp() creates fluid typography that scales smoothly between minimum and maximum values without discrete breakpoints.

Code Example

/* Mobile-first responsive design */

/* Base: mobile styles (smallest screen) */
.container { padding: 1rem; }
.nav-links { display: none; } /* hidden on mobile */
.hamburger { display: block; }

.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* single column on mobile */
  gap: 1rem;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container { padding: 1.5rem; max-width: 720px; margin: 0 auto; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 1200px; }
  .nav-links  { display: flex; }
  .hamburger  { display: none; }
  .card-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* Fluid typography — no breakpoints needed */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

/* Responsive images */
img { max-width: 100%; height: auto; }

Why It Matters for Engineers

More than half of all web traffic comes from mobile devices. A non-responsive site is effectively broken for most users. Responsive design is not a feature — it's a baseline requirement. When AI generates a web UI, it often produces desktop-focused layouts with fixed pixel widths. Knowing how to audit and fix those layouts for mobile is a practical production skill. Mobile-first also trains you to prioritize: what's the most essential content at the smallest size? This question produces cleaner designs and forces you to think about hierarchy, which makes every screen size better, not just mobile.