CSS — Media Queries

One page, many screens

Media queries apply CSS conditionally — most famously by viewport width:

/* Base styles: phones */
.container { padding: 16px; }

/* 768px and wider */
@media (min-width: 768px) {
    .container { padding: 32px; }
}

Reading it aloud

"When the screen is at least 768 pixels wide, also apply these rules."

Mobile-first is the default strategy

Write the small-screen layout as normal CSS, then add complexity upward:

.cards {
    display: grid;
    grid-template-columns: 1fr;           /* stacked on phones   */
}
@media (min-width: 700px) {
    .cards { grid-template-columns: repeat(2, 1fr); }   /* tablets */
}
@media (min-width: 1100px) {
    .cards { grid-template-columns: repeat(4, 1fr); }   /* desktop */
}

Why not shrink desktop downward (max-width)? Small screens get simpler designs for free, and phones — most of your traffic — download only the base styles.

Standard breakpoints

No official standard; these cover virtually every device:

Name	Query	Targets
(base)	—	Phones
sm	min-width: 640px	Large phones
md	min-width: 768px	Tablets
lg	min-width: 1024px	Laptops
xl	min-width: 1280px	Desktops

Pick 3, use them consistently. Random per-component breakpoints create unmaintainable spaghetti.

Other conditions

Width isn't the only trigger:

@media (orientation: landscape) { … }
@media (prefers-color-scheme: dark) {
    body { background: #111; color: #eee; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}
@media print {
    nav, footer { display: none; }
}

Dark-mode support and motion sensitivity both ride on media queries — modern must-haves, each just a few lines.

Combining conditions

/* between 700 and 1100 only */
@media (min-width: 700px) and (max-width: 1099px) { … }

/* multiple targets share one block */
@media (min-width: 1024px), print { … }

A complete responsive card

.card {
    display: flex;
    flex-direction: column;     /* image above text on narrow */
    gap: 12px;
}
.card img { max-width: 100%; }

@media (min-width: 640px) {
    .card {
        flex-direction: row;    /* image beside text          */
        align-items: center;
    }
    .card img { width: 180px; }
}

(Phones stack the card vertically; from 640px up it becomes a horizontal media object.)

Testing workflow

1. DevTools → device toolbar (Ctrl+Shift+M)
2. Drag width through 360 → 768 → 1200
3. Fix what breaks by adding a query — never by patching desktop styles with !important

Mini Practice

1. Convert a fixed 4-column grid to mobile-first stacking + two queries
2. Add dark mode via prefers-color-scheme to an existing page
3. Hide the sidebar below 900px using one query
4. Make typography scale: base 16px, 18px at lg
5. Print-style a recipe page: hide nav, black text, no shadows

Next: responsive →