Media Queries & Responsive Design

Media queries & Responsive Design

Make your layout respond to the screen, phones, tablets, and desktops!

The basic form

@media (condition) { rules }:

@media (max-width: 600px) {
  body { background-color: lightblue; }
}

Runs when the viewport is 600px wide or less.

min-width vs max-width

• max-width: styles when viewport is AT MOST that size (mobile-first breakpoints usually).
• min-width: when viewport is AT LEAST that size.

/* desktop */
@media (min-width: 768px) { ... }
/* phone */
@media (max-width: 767px) { ... }

Media types & features

@media print { ... }                      /* when printing */
@media screen and (min-width: 700px) { }
@media (orientation: landscape) { }
@media (prefers-color-scheme: dark) { }   /* dark mode! */
@media (prefers-reduced-motion: reduce) { }

The classic breakpoints

• 600px (small phones), 768px (tablets), 992px (laptops), 1200px (wide).

Responsive patterns

• Stack: columns become rows via flex-wrap or grid template.
• Images: max-width: 100% so they never overflow.
• Text: clamp() or vw-based sizes.
• Nav: hamburger menu on small screens.

Viewport meta rule

HTML needs:

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

TL;DR

• @media (feature) { }, conditional styles.
• min/max-width are breakpoint workhorses.
• Features: print, orientation, hover, color scheme, reduced motion.
• Do mobile styles, then min-width for larger up.
• Add the viewport meta tag!