Media Queries

A website that looks great on a laptop might be a disaster on a phone. Responsive design is about making your site adapt to any screen size. And the most important tool for that is the @media rule.

The @media Rule

Media queries let you apply CSS only when certain conditions are true — like the screen being a certain width. Think of them as if-statements for styles.

/* Base styles for all screens */
body {
  font-size: 16px;
}

/* Styles for screens wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}
    

In this example, font size jumps from 16px to 18px when the screen is at least 768px wide. Small screens get the smaller font, larger screens get the bigger one.

Breakpoints

A breakpoint is the screen width where your layout changes. Common breakpoints are:

• 480px — small phones
• 768px — tablets
• 1024px — small laptops
• 1200px — desktops

/* Default: mobile styles */

@media (min-width: 768px) {
  /* tablet and up */
}

@media (min-width: 1024px) {
  /* desktop */
}
    

Build your base styles for mobile first, then add layers for larger screens. That approach is called mobile-first, and it is the standard practice today.

Min-Width vs Max-Width

min-width means "apply these styles when the screen is at least this wide." max-width means "apply when the screen is at most this wide."

/* Mobile-first — min-width */
@media (min-width: 768px) { /* tablet up */ }

/* Desktop-first — max-width */
@media (max-width: 767px) { /* mobile only */ }
    

Most developers use min-width with a mobile-first approach. It just feels more natural — start small and add complexity as the screen grows.

Responsive Layouts

Media queries really shine with layouts. A sidebar that sits beside the content on desktop can stack on top on mobile:

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}
    

Single column on mobile, two columns on wider screens. Simple, clean, and it works perfectly.