beginnerPhase 31 · CSS

Responsive Design

Build layouts that adapt to any screen size using modern CSS techniques.

45m

0 problems

Topic Progress0%

Mobile-First Approach

Design for mobile devices first, then progressively enhance for larger screens.

Why Mobile-First?

Better performance on mobile
Forces focus on essential content
Easier to add complexity than remove it
Better SEO

Implementation

/* Base styles (mobile) */
.container {
  padding: 10px;
}

.column {
  width: 100%;
}

/* Enhance for tablets */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
  
  .column {
    width: 50%;
  }
}

/* Enhance for desktop */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .column {
    width: 33.33%;
  }
}

Breakpoint Strategy

Start with content, not devices:

/* When layout breaks, add a breakpoint */

/* Single column */
.grid {
  display: flex;
  flex-direction: column;
}

/* Two columns */
@media (min-width: 600px) {
  .grid {
    flex-direction: row;
  }
  .grid > * {
    width: 50%;
  }
}

/* Three columns */
@media (min-width: 900px) {
  .grid > * {
    width: 33.33%;
  }
}

Breakpoints

Common Breakpoints

/* Mobile: 0 - 576px */
/* Tablet: 576px - 768px */
/* Desktop: 768px - 992px */
/* Large: 992px - 1200px */
/* XL: 1200px+ */

@media (min-width: 576px) { /* Tablet */ }
@media (min-width: 768px) { /* Desktop */ }
@media (min-width: 992px) { /* Large */ }
@media (min-width: 1200px) { /* XL */ }

Content-Based Breakpoints

/* Use when content needs it, not arbitrary devices */
.container {
  padding: 1rem;
}

@media (min-width: 40em) {
  .container {
    padding: 2rem;
  }
}

Breakpoint Best Practices

Use min-width for mobile-first
Don't target specific devices
Keep breakpoints minimal
Test on real devices

Container Queries (Modern)

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

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Fluid Layouts

Relative Units

/* Use relative units */
.container {
  width: 90%;           /* Percentage */
  max-width: 1200px;    /* Max constraint */
  margin: 0 auto;       /* Center */
}

.font-size {
  font-size: 1rem;      /* Root font size */
  font-size: clamp(1rem, 2vw, 1.5rem); /* Fluid font */
}

Fluid Typography

/* clamp(min, preferred, max) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

Fluid Spacing

.section {
  padding: clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

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

Fluid Grid with CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

Viewport Units

.hero {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
}

.sidebar {
  width: 25vw;
}

Practice Problems

0/3solved

intermediateBuild Responsive Design Component

Create a reusable React component implementing Responsive Design. Include proper state management and accessibility.

Solution

// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed

intermediateResponsive Design Testing

Write unit and integration tests for Responsive Design using React Testing Library.

Solution

// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests

intermediateResponsive Design Performance

Optimize Responsive Design for performance. Consider memoization, code splitting, and bundle size.

Solution

// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Flashcards

Question

What is the mobile-first approach?

Click to reveal answer

Answer

Designing for mobile devices first, then progressively enhancing for larger screens using min-width media queries.

Question

What does clamp() do?

Click to reveal answer

Answer

Creates a fluid value that scales between a minimum and maximum. clamp(min, preferred, max).

Question

How do you make images responsive?

Click to reveal answer

Answer

Set max-width: 100% and height: auto on the image.

Question

What are common breakpoints?

Click to reveal answer

Answer

576px (tablet), 768px (desktop), 992px (large), 1200px (XL). Use min-width for mobile-first.

Question

What is a fluid layout?

Click to reveal answer

Answer

A layout that adapts to different screen sizes using relative units (%, vw, rem) instead of fixed units (px).

Revision Notes

Key Takeaways

1.Mobile-first uses min-width media queries to scale up
2.clamp() creates fluid typography and spacing
3.max-width: 100% makes images responsive
4.Use relative units (%, vw, rem) for fluid layouts
5.Breakpoints should be content-based, not device-based

Interview Tips

•Explain the benefits of mobile-first design
•Know how to use clamp() for fluid values
•Understand when to use container queries vs media queries
•Be able to create a responsive grid without media queries

Cheat Sheet