CSS Media Queries Explained with Examples

CSS media queries let you apply styles only when a condition is true, like a minimum screen width or dark mode. Learn the @media syntax, breakpoints and modern range syntax with examples.

What is a media query?

A media query is an "if" statement for CSS. It says: "If the screen is at least this wide, use these styles." The browser checks the condition all the time, so when you rotate your phone or resize the window, the styles update instantly.

The basic syntax looks like this:

@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

• @media starts the media query.
• (min-width: 768px) is the media feature: the condition being tested.
• Inside the curly braces, you write normal CSS rules. They only apply when the condition is true.

You can also name a media type, like screen or print. @media print { ... } is very handy for hiding menus and buttons when someone prints your page. If you don't write a type, the query applies to all types.

Using min-width breakpoints (mobile-first)

A breakpoint is the width where your layout changes. With mobile-first CSS, you use min-width, so each breakpoint adds styles for bigger screens.

<section class="plans">
  <div class="plan">Free</div>
  <div class="plan">Pro</div>
  <div class="plan">Team</div>
</section>

.plans {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.plan {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
}

@media (min-width: 600px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin-inline: auto;
  }
}

On a phone, the three plans stack in one column. From 600 pixels wide, they show two per row. From 960 pixels, all three sit side by side in a centered area. Because both conditions are true on a wide screen, the later rule wins, which is why breakpoints go from small to large.

Common breakpoints that work well in 2026:

Breakpoint	Typical devices
Base (no query)	Phones, under 600px
600px	Large phones and small tablets
768px	Tablets in portrait
1024px	Tablets in landscape and small laptops
1280px	Laptops and desktops

Tip: Don't choose breakpoints by device names. Make your browser window narrow, then slowly widen it. When the layout starts to look wrong or too stretched, that is where you need a breakpoint.

Modern range syntax: width >= 768px

Writing min-width and max-width can be confusing. Modern CSS has a clearer range syntax with comparison signs, supported in all current browsers:

/* Same as (min-width: 768px) */
@media (width >= 768px) {
  .menu { display: flex; }
}

/* Only below 600px */
@media (width < 600px) {
  .hero h1 { font-size: 1.75rem; }
}

/* Between 768px and 1023px */
@media (768px <= width < 1024px) {
  .sidebar { width: 200px; }
}

This reads almost like normal maths. >= means "greater than or equal", and < means "less than". With the old syntax, a "between" rule needed (min-width: 768px) and (max-width: 1023.98px). You can still combine conditions with and, use a comma to mean "or", and not to reverse a query.

Common mistake: Mixing min-width and max-width queries that both match at the same width, like (max-width: 768px) and (min-width: 768px). At exactly 768px, both apply and fight each other. The range syntax with < and >= avoids this problem.

Orientation, dark mode and input media features

Media queries can test much more than width:

• (orientation: landscape) and (orientation: portrait) – is the screen wider than it is tall, or taller than wide?
• (prefers-color-scheme: dark) – the user has chosen dark mode in their system settings.
• (prefers-reduced-motion: reduce) – the user wants fewer animations.
• (hover: hover) – the main input device can hover, like a mouse. Touch screens usually can't.
• (pointer: coarse) – the main input is not very precise, like a finger. fine means a mouse or stylus.

:root {
  --bg: #ffffff;
  --text: #1f2937;
}

body {
  background: var(--bg);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --text: #e5e7eb;
  }
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.12);
  }
}

@media (pointer: coarse) {
  .btn {
    min-height: 48px;
    padding-inline: 20px;
  }
}

@media (orientation: landscape) and (height < 500px) {
  .hero {
    min-height: auto;
  }
}

If your computer or phone is set to dark mode, the page turns dark with light text. Only the two custom properties change, and every rule that uses them updates. Cards lift on hover only on devices with a real mouse, so touch users don't get "stuck" hover effects. On touch screens, buttons become at least 48 pixels tall, a comfortable size for fingers. On a phone turned sideways, the hero section stops taking the full height.

Note: Dark mode deserves more than a quick color swap, and you will go deeper into it in a later part of this course. You can find every media feature on MDN's media queries page.

Practice exercise

Build a simple page with a header, three feature boxes and a footer. Mobile-first: stack the features in one column. Add a breakpoint at width >= 700px for three columns. Then add a prefers-color-scheme: dark query that changes the background and text color, and a print query that hides the header.

Hint: test dark mode in developer tools. In Chrome, open the Rendering panel and use "Emulate CSS media feature prefers-color-scheme". In Firefox, use the sun and moon icon in the Inspector.

Key takeaways

• A media query applies CSS only when a condition is true, like (width >= 768px).
• Mobile-first uses min-width breakpoints, ordered from small to large.
• Pick breakpoints where your content breaks, not by device names.
• The range syntax (width >= 768px) is clearer and avoids overlapping queries.
• Media features like prefers-color-scheme, hover, pointer and orientation adapt your design to the user, not only the screen.

Frequently asked questions

Should I use min-width or max-width media queries?

For mobile-first CSS, use min-width (or width >=). Your base styles are for phones, and each query adds changes for bigger screens. max-width queries are fine for small fixes, but mixing both styles in one project gets confusing.

Where do I put media queries in my CSS file?

Either at the end of the file, or right after the rule they change. Many developers prefer keeping each query next to the component it changes, so all the styles for that component are in one place. Just make sure they come after the base rules, so they win.

Can I use em instead of px in media queries?

Yes. @media (width >= 48em) is about 768px with the default font size. Using em means the breakpoint also respects a user's larger browser font setting, which some developers prefer for accessibility.