Responsive Design Expert

Description: Create fluid, mobile-first designs that work beautifully across all screen sizes

Core Principles

Build responsive layouts that adapt gracefully from mobile phones to large desktop monitors using modern CSS and best practices.

Mobile-First Approach

/* ✅ Mobile-first: Start with mobile, enhance for larger screens */
.container {
  padding: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 960px;
  }
}

/* ❌ Desktop-first: Harder to maintain */
.container {
  padding: 3rem;
  max-width: 960px;
}

@media (max-width: 1024px) {
  .container {
    padding: 2rem;
    max-width: 720px;
  }
}

Breakpoints

/* Standard breakpoints */
/* Mobile: < 640px (default) */
/* Tablet: 640px - 1024px */
/* Desktop: > 1024px */

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* Tailwind-style breakpoints */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

Fluid Layouts

CSS Grid

/* Responsive grid without media queries */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* 12-column grid system */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.col-span-6 {
  grid-column: span 6; /* 50% width */
}

@media (max-width: 768px) {
  .col-span-6 {
    grid-column: span 12; /* Full width on mobile */
  }
}

Flexbox

/* Responsive flex layout */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px; /* grow, shrink, basis */
}

/* Center content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Responsive Typography

/* Fluid typography using clamp */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* min: 2rem, preferred: 5vw, max: 4rem */
}

body {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* Using CSS custom properties */
:root {
  --font-size-base: 16px;
  --font-size-lg: 18px;
}

@media (min-width: 768px) {
  :root {
    --font-size-base: 18px;
    --font-size-lg: 20px;
  }
}

body {
  font-size: var(--font-size-base);
}

Responsive Images

<!-- Modern responsive images -->
<picture>
  <source
    media="(min-width: 1024px)"
    srcset="hero-desktop.webp 1x, hero-desktop@2x.webp 2x"
  >
  <source
    media="(min-width: 768px)"
    srcset="hero-tablet.webp 1x, hero-tablet@2x.webp 2x"
  >
  <img
    src="hero-mobile.webp"
    srcset="hero-mobile@2x.webp 2x"
    alt="Hero image"
    loading="lazy"
  >
</picture>

<!-- srcset with sizes -->
<img
  src="photo.jpg"
  srcset="photo-400w.jpg 400w,
          photo-800w.jpg 800w,
          photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Photo"
>

Container Queries (Modern)

/* Responsive based on container size, not viewport */
.card-container {
  container-type: inline-size;
  container-name: card;
}

.card-title {
  font-size: 1.5rem;
}

@container card (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }

  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile hamburger menu */
.nav-toggle {
  display: block;
}

.nav-menu {
  display: none;
  flex-direction: column;
}

.nav-menu.active {
  display: flex;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
  }
}

Testing Responsive Design

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Device Testing Checklist

iPhone SE (375px)
iPhone 12/13 (390px)
iPad (768px)
Desktop (1024px+)
Large desktop (1920px+)
Test landscape orientations
Test with browser zoom (125%, 150%)

When to Use This Skill

Designing responsive layouts
Converting desktop designs to mobile
Optimizing for different screen sizes
Improving mobile user experience

Remember: Design for mobile first, then progressively enhance for larger screens!

4.3 KiB Raw Blame History