Responsive Design

Breakpoints, media queries, and responsive design patterns

Breakpoints

Mobile First

Design for mobile first, then scale up

/* Mobile styles first */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }

Common Breakpoints

Standard device breakpoints

/* Mobile: 320px-767px */
/* Tablet: 768px-1023px */
/* Desktop: 1024px+ */
/* Large: 1440px+ */

Custom Breakpoints

Define your own breakpoints

/* Custom breakpoint */
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

Media Queries

min-width

Styles apply when viewport is at least this wide

@media (min-width: 768px) {
  .sidebar { display: block; }
}

max-width

Styles apply when viewport is at most this wide

@media (max-width: 767px) {
  .sidebar { display: none; }
}

orientation

Target device orientation

@media (orientation: landscape) {
  .header { height: 60px; }
}

prefers-color-scheme

Target dark/light mode preference

@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; }
}

Flexible Units

Viewport Units

Units relative to viewport size

width: 100vw; /* Full viewport width */
height: 100vh; /* Full viewport height */
font-size: 4vw; /* Responsive font size */

Percentage

Relative to parent element

width: 100%; /* Full parent width */
padding: 5%; /* 5% of parent width */

em/rem

Relative to font size

font-size: 1rem; /* 16px by default */
margin: 2em; /* 2x current font size */

clamp()

Responsive value with min/max bounds

font-size: clamp(1rem, 4vw, 2rem);
width: clamp(300px, 50%, 800px);

Images & Media

Responsive Images

Images that scale properly

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

Picture Element

Multiple image sources for different sizes

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <img src="small.jpg" alt="Description">
</picture>

Object Fit

Control how images scale

img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Common Patterns

Mobile-First Grid

Responsive grid that starts mobile and scales up

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

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

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

Responsive Navigation

Navigation that adapts to screen size

.nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-toggle {
  display: block;
}

.nav-menu {
  display: none;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    align-items: center;
  }
  
  .nav-toggle {
    display: none;
  }
  
  .nav-menu {
    display: flex;
  }
}

Fluid Typography

Text that scales with viewport size

html {
  font-size: 16px;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
}

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

Container Queries

Modern approach to component-based responsive design

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

.card-content {
  padding: 1rem;
}

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