Responsive Web Design - Build Websites for Every Screen Size

Responsive web design ensures your website looks and functions well on any device — from small smartphones to large desktop monitors.

With over 60% of web traffic coming from mobile devices, building responsive layouts is no longer optional — it's essential for user experience and SEO.

This guide covers mobile-first design, CSS media queries, fluid layouts, responsive typography, and responsive images.

Viewport Meta Tag

The viewport meta tag tells the browser how to scale and render the page on mobile devices. It's the first step to making any page responsive.

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

<!-- width=device-width: sets page width to device screen width -->
<!-- initial-scale=1.0: sets initial zoom level to 100% -->

Without this tag, mobile browsers will render the page at a desktop width and then scale it down, resulting in tiny unreadable text.

Mobile-First Design Approach

Mobile-first means writing CSS for small screens first, then using media queries to add styles for larger screens. This approach leads to cleaner, more performant CSS.

/* Base styles - mobile first */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* Tablet - 768px and up */
@media (min-width: 768px) {
  .card-grid {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 24px;
  }

  .card {
    flex: 1 1 calc(50% - 16px);
  }
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
  .card-grid {
    padding: 40px;
  }

  .card {
    flex: 1 1 calc(33.333% - 16px);
  }
}

Fluid Typography with clamp()

CSS clamp() creates fluid typography that scales smoothly between a minimum and maximum size based on viewport width, without needing media queries.

/* Fluid font size: min 16px, max 24px */
body {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* Fluid heading */
h1 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.2;
}

/* Fluid spacing */
.section {
  padding: clamp(2rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
}

/* Fluid container width */
.container {
  width: min(90%, 1200px);
  margin-inline: auto;
}

Responsive Images

Responsive images serve appropriately sized images for different screen sizes using the srcset and sizes attributes, reducing bandwidth for mobile users.

<img
  src="/images/hero-800.jpg"
  srcset="
    /images/hero-400.jpg 400w,
    /images/hero-800.jpg 800w,
    /images/hero-1200.jpg 1200w
  "
  sizes="
    (max-width: 480px) 100vw,
    (max-width: 768px) 80vw,
    60vw
  "
  alt="Hero section image"
  width="1200"
  height="600"
  loading="lazy"
>

Common Responsive Breakpoints

• 320px - Small mobile (iPhone SE, older Android phones)
• 480px - Large mobile (most modern smartphones)
• 768px - Tablet portrait (iPad, Android tablets)
• 1024px - Tablet landscape and small laptops
• 1280px - Desktop (most laptop screens)
• 1536px - Large desktop and widescreen monitors

Rather than targeting specific devices, design to breakpoints where your content naturally starts to break or look awkward.

Conclusion

Responsive web design is fundamental to modern web development. By adopting a mobile-first approach, using fluid layouts, and serving optimized assets, you can deliver great experiences on every device.

Combine media queries, clamp(), CSS Grid, and Flexbox to build layouts that elegantly adapt from a 320px mobile screen to a 4K monitor.