What is mobile-first design and why is it important?

Mobile-first design means writing your base CSS for small screens, then using media queries to add styles for larger screens. Over 60% of web traffic is now mobile. Google uses mobile-first indexing, meaning it crawls and ranks the mobile version of your site. Designing for the smallest screen first forces you to prioritize content and performance — you can't hide problems with extra space. It also produces cleaner CSS: additive styles are simpler than overriding desktop styles.

What are media queries and how do they work?

Media queries are CSS rules that apply only when certain conditions are met — most commonly screen width. @media (min-width: 768px) { } applies styles only on screens 768px and wider. Mobile-first uses min-width queries (add styles as screen grows). Desktop-first uses max-width queries (remove styles as screen shrinks). Min-width is simpler and produces better results in most cases.

What is the viewport meta tag and why is it required?

The viewport meta tag ( ) tells mobile browsers to render at the actual device width instead of zooming out to show a desktop-sized page. Without it, your responsive CSS is essentially ignored — mobile browsers assume you built a desktop site and scale it down. It belongs in the of every HTML document.

What are container queries and when should I use them?

Container queries (CSS @container) apply styles based on the size of a parent container, not the viewport. This is more useful for component-based design: a card component that behaves differently when it's in a narrow sidebar vs. a wide main area — without needing to know the viewport size. Container queries are fully supported in all major browsers since 2023 and are the future of responsive component design.

What are CSS breakpoints and which values should I use?

Breakpoints are the screen widths where your layout changes. Common values: 480px (large phones), 640px (small tablets/landscape phones), 768px (tablets), 1024px (small laptops), 1280px (desktops), 1536px (large screens). Don't use fixed device-specific breakpoints — use breakpoints where your content naturally breaks. Add a breakpoint when your design looks wrong, not because a particular device exists.

Responsive Web Design in 2025: Mobile-First Is Not Optional

I built my first website for a desktop screen. It looked great at 1440px wide. Then I checked it on my phone.

The text was tiny. The navigation was a pile of overlapping links. The hero image took up 90% of the screen leaving no room for content. I had to pinch-zoom to read anything.

That was in 2015. Today, over 60% of web traffic comes from mobile devices. And Google has been using mobile-first indexing since 2019 — meaning your mobile experience directly determines your search rankings.

In 2025, "responsive web design" isn't a bonus feature. It's the baseline requirement for anything that lives on the web. This guide covers the techniques that matter: mobile-first CSS, modern layout systems, container queries, and practical debugging.

The Viewport Meta Tag: Non-Negotiable

Before any CSS, add this to your HTML <head>:

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

Without this, mobile browsers render your page as if it were a desktop site (typically 960px wide) and scale it down — your responsive CSS is ignored.

With it, the browser renders at the actual device width and respects your media queries.

Mobile-First CSS: The Right Mental Model

Desktop-First vs Mobile-First

Desktop-first (old approach):

/* Start wide */
.container { width: 1200px; }

/* Override for smaller screens */
@media (max-width: 768px) {
  .container { width: 100%; }
}

Mobile-first (correct approach):

/* Start narrow — works on all screens */
.container { width: 100%; padding: 0 1rem; }

/* Enhance for larger screens */
@media (min-width: 768px) {
  .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
}

Mobile-first wins because:

Base styles are simpler and work everywhere
You only add complexity for larger screens
Forces content prioritization — small screens can't hide bad information architecture
Google's crawler sees the mobile version first

Media Queries

/* Apply when screen is AT LEAST 640px wide */
@media (min-width: 640px) { }

/* Apply when screen is AT LEAST 1024px wide */
@media (min-width: 1024px) { }

/* Multiple conditions */
@media (min-width: 640px) and (max-width: 1023px) { }

/* Portrait orientation */
@media (orientation: portrait) { }

/* Print styles */
@media print { }

Practical Breakpoints

/* Base: mobile (all screens) */
.card { padding: 1rem; font-size: 0.9rem; }

/* sm: ≥640px — large phones, landscape */
@media (min-width: 640px) {
  .card { padding: 1.5rem; }
}

/* md: ≥768px — tablets */
@media (min-width: 768px) {
  .card { font-size: 1rem; }
}

/* lg: ≥1024px — laptops */
@media (min-width: 1024px) {
  .card { padding: 2rem; }
}

/* xl: ≥1280px — desktops */
@media (min-width: 1280px) {
  .card { font-size: 1.1rem; }
}

These match Tailwind CSS's breakpoints — useful if you move to Tailwind later.

Responsive Layouts

Flexible Grid with CSS Grid

/* Responsive card grid — no media queries needed */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

This single rule creates a grid that:

Shows 1 column on small screens (if container < 280px + gap)
Shows 2 columns when there's enough space
Shows 3+ columns on large screens
Never overflows

For a full breakdown of Grid vs Flexbox, see our CSS Grid vs Flexbox guide.

/* Mobile: stacked nav */
nav {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.nav-links {
  display: none;  /* Hidden on mobile */
}

.hamburger {
  display: block;  /* Visible on mobile */
}

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

  .nav-links {
    display: flex;
    gap: 1.5rem;
  }

  .hamburger {
    display: none;
  }
}

Responsive Typography

The clamp() Function

clamp(min, preferred, max) creates fluid typography that scales between a minimum and maximum:

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

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

The middle value (4vw + 1rem) uses viewport width units — font grows with the screen. But it's clamped between the minimum (never too small) and maximum (never too large).

This eliminates breakpoints for typography — the font size is always right.

Line Length

Optimal reading width is 45–75 characters. Use ch units:

article {
  max-width: 70ch;  /* approximately 70 characters wide */
  margin: 0 auto;
}

Responsive Images

Fluid Images

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

This prevents images from overflowing their container. height: auto maintains the aspect ratio.

Serving Different Sizes

The srcset and sizes attributes tell the browser which image to download based on screen size and resolution:

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1600.jpg 1600w
  "
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 50vw,
    800px
  "
  alt="Hero image"
/>

A user on a mobile device downloads the 400px image. A retina desktop downloads the 1600px image. This alone can cut 60–80% of image data on mobile — significant for performance and Core Web Vitals.

Container Queries: The Future of Responsive Components

Media queries respond to the viewport width. Container queries respond to the parent container's width — enabling truly portable responsive components.

/* Define a containment context */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* Base: narrow layout */
.card {
  display: flex;
  flex-direction: column;
}

/* When the container is at least 400px wide */
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

Now the card component switches between vertical and horizontal layouts based on how much space its container provides — not the viewport. Put it in a narrow sidebar, it stacks. Put it in a wide main area, it goes horizontal. No media query hacks needed.

Container queries are supported in all major browsers since 2023 and work with Tailwind CSS 3.2+.

Testing and Debugging Responsive Layouts

Chrome DevTools Device Toolbar — Ctrl+Shift+M. Test specific devices or custom dimensions. Throttle network to Slow 3G to test real mobile conditions.
Real devices — Emulators miss touch interaction, font rendering, and performance issues. Always test on at least one real phone before shipping.
Browser compatibility — Test in Safari (especially on iOS). Safari has historically lagged on CSS features.

See our Chrome DevTools guide for full details on using the device toolbar and network throttling.

Frequently Asked Questions

What is mobile-first design?

Writing base CSS for small screens, then using min-width media queries to add styles for larger screens. Over 60% of web traffic is mobile and Google uses mobile-first indexing.

What are media queries?

CSS rules that apply only when screen conditions match. @media (min-width: 768px) { } applies styles on screens ≥768px wide.

What is the viewport meta tag?

<meta name="viewport" content="width=device-width, initial-scale=1.0"> — tells mobile browsers to render at actual device width. Required in every HTML document.

What are container queries?

CSS @container rules that apply based on parent container size instead of viewport size. Fully supported since 2023.

Which breakpoints should I use?

640px, 768px, 1024px, 1280px are common. Add breakpoints where your design breaks, not for specific devices.

Responsive Web Design in 2025: Mobile-First Is Not Optional