What Is Responsive Web Design?

Responsive web design means your website automatically adjusts its layout and appearance to look good on any screen size, from mobile phones to large desktop monitors. This is achieved primarily through CSS media queries.

The Viewport Meta Tag

Before writing any responsive CSS, your HTML needs the viewport meta tag. Without it, mobile browsers will render the page at a desktop width and zoom out.

HTML

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

This tells the browser to match the screen width and not zoom out.

Media Queries

Media queries let you apply CSS rules only when certain conditions are met, most commonly based on screen width.

CSS

/* Styles apply when screen is 768px wide or less */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .sidebar {
    display: none;
  }
}

/* Styles apply when screen is 769px wide or more */
@media (min-width: 769px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Media Query Syntax

CSS

@media (condition) {
  /* CSS rules here */
}

/* Multiple conditions with AND */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet styles */
}

/* OR conditions with comma */
@media (max-width: 600px), (orientation: portrait) {
  /* Applies if EITHER condition is true */
}

Common Breakpoints

Breakpoints are the screen widths where your layout changes. While there are no universal standard breakpoints, these are widely used:

CSS

/* Small phones */
@media (max-width: 480px) {
  /* ... */
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  /* ... */
}

/* Tablets */
@media (max-width: 1024px) {
  /* ... */
}

/* Small desktops */
@media (max-width: 1200px) {
  /* ... */
}

/* Large desktops */
@media (min-width: 1201px) {
  /* ... */
}

Important: Choose breakpoints based on where your content breaks, not based on specific devices. If a layout starts looking awkward at 850px, that is your breakpoint.

Mobile-First Approach

The mobile-first approach means you write styles for mobile screens first, then add complexity for larger screens using `min-width` media queries.

CSS

/* Base styles: mobile first */
.container {
  width: 100%;
  padding: 15px;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }

  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .card {
    width: calc(50% - 10px);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
  }

  .card {
    width: calc(33.333% - 14px);
  }
}

Mobile-first is the recommended approach because:

Mobile styles are simpler, making a good foundation
You progressively add complexity rather than overriding
Mobile users do not download unnecessary desktop CSS

CSS

/* Mobile: stacked navigation */
.nav {
  display: flex;
  flex-direction: column;
}

.nav-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.nav-links {
  display: none;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

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

.nav-links a {
  padding: 12px 15px;
  border-top: 1px solid #eee;
  text-decoration: none;
  color: #333;
}

.menu-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Desktop: horizontal navigation */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    gap: 5px;
  }

  .nav-links a {
    border-top: none;
    padding: 10px 15px;
    border-radius: 4px;
  }

  .nav-links a:hover {
    background-color: #f0f0f0;
  }

  .menu-toggle {
    display: none;
  }
}

Responsive Typography

CSS

/* Mobile base */
html {
  font-size: 16px;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
}

/* Fluid typography with clamp() */
h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

The `clamp()` function is powerful for responsive typography. It takes three values: minimum, preferred, and maximum size.

Responsive Images

CSS

/* Basic responsive image */
img {
  max-width: 100%;
  height: auto;
}

/* Object-fit for fixed-size containers */
.thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Hide decorative images on mobile */
.hero-decoration {
  display: none;
}

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

Responsive Grid with CSS Grid

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

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

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

/* Or use auto-fit for automatic responsiveness */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

Hiding and Showing Elements

CSS

/* Mobile only */
.mobile-only {
  display: block;
}

.desktop-only {
  display: none;
}

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

  .desktop-only {
    display: block;
  }
}

Responsive Spacing

CSS

/* Mobile */
.section {
  padding: 30px 15px;
}

.container {
  padding: 0 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .section {
    padding: 50px 30px;
  }

  .container {
    padding: 0 30px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .section {
    padding: 80px 40px;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }
}

Testing Responsive Design

Use your browser's developer tools to test at different screen sizes:

Chrome/Edge: Press F12, then click the device toggle icon or press Ctrl+Shift+M
Firefox: Press F12, then click the responsive design mode icon or press Ctrl+Shift+M
Always test on real devices when possible, not just browser simulators

Summary

Responsive web design ensures your site works beautifully on every screen size. Use the viewport meta tag as a foundation. Write mobile-first CSS with `min-width` media queries to progressively enhance for larger screens. Choose breakpoints based on where your content needs adjustment. Use clamp() for fluid typography and auto-fit with minmax for responsive grids that need no media queries at all.

In the next article, you will learn about mobile-first design principles.

Responsive Web Design: Media Queries and Breakpoints