What is mobile-first and why is it better than desktop-first?

Mobile-first means the base styles target mobile, while @media (min-width: 768px) and (min-width: 1024px) expand the layout for tablet and desktop. With min-width you end up with fewer overrides than with max-width: each media query only adds rules instead of undoing ones already written.

Which breakpoints should I use in a responsive layout?

Three or four are enough: up to 480px — mobile (base styles), from 768px — tablet, from 1024px — desktop, from 1280px — wide screens. Do not tie them to specific devices — put breakpoints where the layout actually breaks.

How does clamp() replace media queries?

clamp(min, preferred, max) smoothly scales a value between the minimum and maximum depending on screen width. For example, font-size: clamp(1.2rem, 5vw, 2.4rem) for a heading or padding: clamp(16px, 5vw, 80px) for a section — and not a single @media.

Can I build a responsive grid without a single media query?

Yes: grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) works out how many columns fit on its own — one on mobile, two on tablet, three or more on desktop. For the container add width: min(1200px, 100% - 48px) with margin: 0 auto.

Why do I need the viewport meta tag and what happens without it?

The meta name=viewport tag with content=width=device-width, initial-scale=1.0 tells the mobile browser to use the real screen width. Without it the page is rendered as desktop and shrunk down to fit the screen, and media queries effectively never fire.

Responsive design: media queries without pain

Contents

Mobile-first — write for mobile first

Base styles are for mobile. Media queries extend them for larger screens.

/* Base — mobile */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

Standard breakpoints

/* Mobile:  < 480px  — base styles */
/* Tablet:  ≥ 768px  */
/* Desktop: ≥ 1024px */
/* Wide:    ≥ 1280px */

💡 Use min-width (mobile-first) instead of max-width — fewer overrides and more logical to read.

clamp() — responsive sizes without media queries

clamp(min, preferred, max) — the value scales smoothly between minimum and maximum.

/* Font: minimum 1.2rem, maximum 2.4rem */
h1 {
  font-size: clamp(1.2rem, 5vw, 2.4rem);
}

/* Padding: minimum 16px, maximum 80px */
.section {
  padding: clamp(16px, 5vw, 80px);
}

/* Container width */
.container {
  width: min(1200px, 100% - 48px);
  margin: 0 auto;
}

Responsive grid without media queries

More on choosing between layout systems in Flexbox vs Grid.

.cards {
  display: grid;
  /* On mobile — 1 column, on tablet — 2, on desktop — 3+ */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
/* And all this WITHOUT a single media query */

Don't forget the viewport meta

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

Without this tag, mobile browsers scale the page as if it were desktop.

⚠️ Never use fixed widths like width: 960px — it breaks layout on mobile. Use max-width + width: 100%. And for device-aware color schemes there are CSS variables and dark theme.