Responsive Design with CSS Media Queries

What is Responsive Design?

Responsive design makes websites adapt to any screen size — phone, tablet, desktop. Media queries are the core tool.

Basic Media Query

/* Default: mobile styles */
.container { width: 100%; }

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

/* Desktop and up */
@media (min-width: 1024px) {
  .container { width: 1000px; }
}

Mobile-First Approach

Write base styles for mobile, then use min-width to enhance for larger screens. This is the recommended modern approach.

The Viewport Meta Tag (Required!)

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

Common Breakpoints

Device	Width
Mobile	< 768px
Tablet	768px–1024px
Desktop	> 1024px

Modern Alternatives

Often you don't even need media queries — use clamp(), Grid auto-fit, and Flexbox wrap for fluid layouts.

FAQs

Mobile-first or desktop-first?

Mobile-first is recommended — simpler CSS and better performance. More in our CSS section.

What units should I use?

Relative units (rem, %, vw) adapt better than fixed px.