Introduction

Responsive design ensures your website works beautifully on all devices - from mobile phones to large desktop monitors. Breakpoints are the key to making this happen. This guide covers modern best practices for 2024.

What are Breakpoints?

Breakpoints are specific screen widths where your website’s layout changes to adapt to different screen sizes. They’re defined using CSS media queries.

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
  }
}

Modern Device Landscape

Common Screen Sizes (2024)

Device TypeWidth RangeCommon Sizes
Mobile320px - 480px375px, 414px
Tablet481px - 768px768px
Desktop769px - 1920px1280px, 1440px
Large Desktop1921px+2560px, 3840px

Market Share

  • Mobile: ~60% of web traffic
  • Tablet: ~5% of web traffic
  • Desktop: ~35% of web traffic

Standard Breakpoints

Mobile-First Approach

Start with mobile styles, then add larger breakpoints:

/* Mobile (default) */
.container {
  padding: 1rem;
  font-size: 16px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    font-size: 18px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 20px;
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

Common Breakpoint Values

/* Extra Small (mobile portrait) */
@media (min-width: 320px) {
}

/* Small (mobile landscape) */
@media (min-width: 480px) {
}

/* Medium (tablet) */
@media (min-width: 768px) {
}

/* Large (desktop) */
@media (min-width: 1024px) {
}

/* Extra Large (large desktop) */
@media (min-width: 1280px) {
}

/* XXL (ultra-wide) */
@media (min-width: 1920px) {
}

Breakpoint Strategies

1. Content-Based Breakpoints

Don’t use arbitrary numbers - break where content needs it:

/* Break when sidebar becomes too narrow */
@media (min-width: 900px) {
  .sidebar {
    width: 300px;
  }
}

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

2. Container-Based Breakpoints

Use container queries (modern approach):

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

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

3. Typography Breakpoints

Adjust font sizes at different breakpoints:

h1 {
  font-size: 2rem; /* Mobile */
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 4rem; /* Desktop */
  }
}

Implementation Examples

CSS Grid Responsive

.grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile */
  gap: 1rem;
}

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

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

@media (min-width: 1280px) {
  .grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
  }
}

Flexbox Responsive

.navbar {
  flex-direction: column; /* Mobile - stacked */
  gap: 1rem;
}

@media (min-width: 768px) {
  .navbar {
    flex-direction: row; /* Tablet+ - horizontal */
    justify-content: space-between;
  }
}

Container Queries (Modern)

.card {
  container-type: inline-size;
  padding: 1rem;
}

.card-content {
  display: flex;
  flex-direction: column;
}

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

  .card-image {
    width: 40%;
  }
}

Best Practices

✅ Do This

1. Mobile-First

/* Start with mobile */
.button {
  width: 100%;
  padding: 12px;
}

/* Enhance for larger screens */
@media (min-width: 768px) {
  .button {
    width: auto;
    padding: 12px 24px;
  }
}

2. Use Relative Units

/* Good */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 2rem;
}

/* Avoid fixed widths */
.container {
  width: 1200px; /* ❌ Doesn't adapt */
}

3. Test Real Devices

  • Test on actual phones/tablets
  • Use browser DevTools device emulation
  • Test in different orientations

4. Progressive Enhancement

/* Base styles work everywhere */
.card {
  display: block;
}

/* Enhancements for capable devices */
@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

❌ Don’t Do This

1. Don’t Hide Content

/* ❌ Bad - content hidden on mobile */
@media (max-width: 768px) {
  .important-info {
    display: none;
  }
}

2. Don’t Use Too Many Breakpoints

/* ❌ Too many - hard to maintain */
@media (min-width: 320px) {
}
@media (min-width: 480px) {
}
@media (min-width: 640px) {
}
@media (min-width: 768px) {
}
@media (min-width: 800px) {
}
@media (min-width: 900px) {
}
/* ... */

/* ✅ Better - 3-5 breakpoints */
@media (min-width: 768px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1440px) {
}

3. Don’t Use Max-Width Media Queries

/* ❌ Max-width (desktop-first) */
@media (max-width: 768px) {
  /* Mobile styles */
}

/* ✅ Min-width (mobile-first) */
@media (min-width: 768px) {
  /* Desktop styles */
}

CSS Custom Properties for Breakpoints

:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1920px;
}

@media (min-width: var(--breakpoint-md)) {
  .container {
    max-width: var(--breakpoint-lg);
  }
}

Testing Responsive Design

Browser DevTools

  1. Open DevTools (F12)
  2. Toggle device toolbar (Ctrl+Shift+M)
  3. Select device or custom size
  4. Test different orientations

Our Tools

Common Patterns

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

.nav-toggle {
  display: block;
}

/* Desktop - horizontal menu */
@media (min-width: 768px) {
  .nav {
    display: flex;
    gap: 2rem;
  }

  .nav-toggle {
    display: none;
  }
}
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

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

Typography Scale

:root {
  font-size: 16px; /* Base - mobile */
}

@media (min-width: 768px) {
  :root {
    font-size: 18px; /* Tablet */
  }
}

@media (min-width: 1024px) {
  :root {
    font-size: 20px; /* Desktop */
  }
}

Conclusion

Responsive breakpoints are essential for modern web design:

Key principles:

  • Mobile-first approach
  • Content-based breakpoints
  • 3-5 main breakpoints
  • Test on real devices
  • Progressive enhancement

Recommended breakpoints:

  • Mobile: < 768px
  • Tablet: 768px - 1023px
  • Desktop: 1024px - 1279px
  • Large Desktop: 1280px+

Next Steps