Syllabus

On this page

Media Queries

Badar KhalilUpdated September 30, 2026 8 min read

CSS Media Queries: Complete Guide

Focus keyword: CSS media queries. Media queries let your CSS react to the device and the user: screen size, orientation, resolution, input type and preferences such as dark mode or reduced motion. They are the main tool of responsive design. In this lesson you will learn the syntax, the modern range syntax, how to choose breakpoints, how to query user preferences, how to write print styles, and how to use media queries from JavaScript.

CSS media query syntax, min-width vs max-width, media query range syntax, responsive breakpoints 2026, content-based breakpoints, orientation landscape portrait, prefers-reduced-motion, prefers-color-scheme, prefers-contrast, prefers-reduced-data, hover and pointer media features, print stylesheet, matchMedia JavaScript, resolution and dppx, media query em vs px, media queries vs container queries, nested media queries, forced-colors.

1. Media Query Syntax

A media query has an optional media type and one or more conditions in parentheses: @media screen and (min-width: 600px) { ... }. The rules inside apply only when the whole query is true.

Media types: all (default), screen, print. Older types such as handheld and tv are obsolete.
Media features: conditions such as width, height, orientation, aspect-ratio, resolution, hover, pointer and many preference features.
Logical operators: and (all true), a comma (any true, works as or), not (negate the whole query) and only (hide the query from very old browsers).

Example with a comma: @media (max-width: 500px), (orientation: portrait) { ... } applies when either condition is true.

2. min-width and max-width

min-width: 600px means the viewport is 600px or wider. max-width: 599px means the viewport is 599px or narrower. For mobile-first CSS use min-width as your main tool. Mixing both is useful for a range, such as a rule that only applies to tablets.

3. Range Syntax (Modern)

Modern browsers support comparison operators, which are shorter and avoid off-by-one gaps: @media (width >= 600px), @media (width < 600px) and @media (400px <= width <= 900px). The range syntax also works with height and aspect-ratio. It removes the old trick of writing max-width: 599.98px to avoid overlaps with min-width: 600px, because width < 600px and width >= 600px never overlap.

4. Choosing Breakpoints

Do not build for specific devices, because new sizes appear every year. Resize your layout and add a breakpoint where the design breaks: a line becomes too long, columns become too narrow or a gap looks empty. Typical starting values are 600px, 900px and 1200px, or 40em, 60em and 75em. Keep the number small, usually two to four. Use CSS variables for spacing, but remember that variables cannot be used inside the media query condition itself.

em vs px in media queries

In media queries em and rem are based on the browser default font size (normally 16px), not on your CSS. When a user increases their default font size, em-based breakpoints trigger earlier, which gives larger text more room. This is one reason many teams prefer em breakpoints, for example @media (min-width: 40em). Pick one unit and use it everywhere.

5. Orientation, Aspect Ratio and Resolution

orientation: landscape or portrait: based on width versus height of the viewport.
aspect-ratio and min-aspect-ratio: for example (min-aspect-ratio: 16/9) for very wide windows.
resolution: (min-resolution: 2dppx) matches high density screens, useful for sharper background images.
height: (max-height: 500px) helps with short landscape phones.

6. Input Capability Queries

hover: hover and pointer: fine describe the primary input, while any-hover and any-pointer check every available input. Use them to add hover effects only where hovering is possible and to enlarge controls for touch.

7. User Preference Queries

prefers-color-scheme: dark: the user wants a dark interface.
prefers-reduced-motion: reduce: remove or shorten animations, parallax and autoplay movement.
prefers-contrast: more or less: adjust borders and colors.
prefers-reduced-data: reduce: skip large images, videos or web fonts when the user asks to save data (limited support).
prefers-reduced-transparency: reduce: limited support, reduce blur and transparency.
forced-colors: active: Windows high contrast mode. Avoid fighting it and keep borders visible.
display-mode: standalone: the page runs as an installed web app.

8. Print Styles

Use @media print to make pages print well: hide navigation, ads and buttons, use black text on white, set a readable size in points, avoid breaking inside cards with break-inside: avoid, and show link addresses with a[href]::after { content: ' (' attr(href) ')'; }. Test with the print preview in DevTools.

9. Nesting and Combining

You can combine queries with and, for example (min-width: 700px) and (orientation: landscape). Media queries can be nested inside a rule in native CSS nesting, which keeps responsive rules next to the component. They can also be used in <link media='...'>, <source media='...'> and @import url() media-query.

10. Media Queries in JavaScript

window.matchMedia('(min-width: 600px)') returns an object with a matches boolean and a change event. Use it to reset a mobile menu when the screen becomes wide, to swap content, or to check the user's color scheme. Prefer CSS whenever possible and use JavaScript only for behavior.

11. Media Queries vs Container Queries

A media query asks about the viewport or the device. A container query asks about the size of a parent element, which is better for reusable components. Use media queries for the page layout, such as the number of columns of the whole page, and for user preferences. You will learn container queries in a later lesson.

12. Common Mistakes

Missing the viewport meta tag, so queries never match the real width.
Writing min-width and max-width rules that overlap or leave a gap.
Targeting devices instead of content.
Using too many breakpoints.
Putting a media query before the base rule it should override, so the base rule wins by order.
Trying to use a CSS variable inside the query condition.
Hiding hover content from touch users.
Ignoring prefers-reduced-motion.
Forgetting to test print output.

Key Takeaways

Write base styles first, then add min-width queries where the content needs them. Prefer range syntax, choose breakpoints by content, query user preferences and input capabilities, write a print stylesheet, and use matchMedia only for behavior that CSS cannot handle.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; margin: 0; padding: 16px; }
  .banner { padding: 18px; color: #fff; background: #264653; border-radius: 10px; }
  .banner::after { content: ' Base styles (mobile)'; }
  @media (min-width: 600px) {
    .banner { background: #2a9d8f; }
    .banner::after { content: ' 600px and wider'; }
  }
  @media (min-width: 900px) {
    .banner { background: #e76f51; }
    .banner::after { content: ' 900px and wider'; }
  }
</style>
<div class='banner'>Current range:</div>
<p>Resize the preview to see the banner change at 600px and 900px.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 16px; }
  .box { padding: 12px; margin-bottom: 10px; color: #fff; border-radius: 8px; background: #888; }
  .a::after { content: ' (width < 400px is false)'; }
  @media (width < 400px) { .a { background: #e76f51; } .a::after { content: ' (width < 400px is true)'; } }
  .b::after { content: ' (width >= 500px is false)'; }
  @media (width >= 500px) { .b { background: #2a9d8f; } .b::after { content: ' (width >= 500px is true)'; } }
  .c::after { content: ' (400px <= width <= 800px is false)'; }
  @media (400px <= width <= 800px) { .c { background: #264653; } .c::after { content: ' (400px <= width <= 800px is true)'; } }
</style>
<div class='box a'>Range syntax A</div>
<div class='box b'>Range syntax B</div>
<div class='box c'>Range syntax C</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px system-ui, sans-serif; padding: 16px; }
  .box { padding: 14px; margin-bottom: 10px; color: #fff; background: #264653; border-radius: 8px; }
  .o::after { content: ' orientation: portrait'; }
  @media (orientation: landscape) { .o::after { content: ' orientation: landscape'; } }
  .h::after { content: ' no hover support'; }
  @media (hover: hover) and (pointer: fine) { .h::after { content: ' hover and fine pointer'; } }
  .r::after { content: ' standard density screen'; }
  @media (min-resolution: 2dppx) { .r::after { content: ' high density screen (2dppx or more)'; } }
  .w::after { content: ' narrower than 16 / 9'; }
  @media (min-aspect-ratio: 16/9) { .w::after { content: ' very wide window (16 / 9 or wider)'; } }
</style>
<div class='box o'>Orientation:</div>
<div class='box h'>Input:</div>
<div class='box r'>Resolution:</div>
<div class='box w'>Aspect ratio:</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; background: #fff; color: #1b1b1f; }
  .pulse { width: 80px; height: 80px; border-radius: 50%; background: #e76f51; animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { transform: scale(1.25); } }
  .card { margin-top: 20px; padding: 16px; border: 1px solid #ccc; border-radius: 12px; max-width: 320px; }

  @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }
  @media (prefers-color-scheme: dark) {
    body { background: #12141a; color: #eceff4; }
    .card { border-color: #3b4252; }
  }
  @media (prefers-contrast: more) { .card { border: 3px solid currentColor; } }
</style>
<div class='pulse'></div>
<div class='card'>This page reacts to reduced motion, dark mode and high contrast settings of your system.</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 16px/1.6 system-ui, sans-serif; padding: 16px; }
  nav { background: #264653; padding: 10px; margin-bottom: 12px; }
  nav a { color: #fff; margin-right: 12px; }
  .card { border: 1px solid #ccc; padding: 12px; margin-bottom: 12px; border-radius: 8px; }

  @media print {
    nav, .no-print { display: none; }
    body { font-size: 12pt; color: #000; background: #fff; }
    .card { break-inside: avoid; border-color: #000; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; }
  }
</style>
<nav><a href='#'>Home</a><a href='#'>Docs</a></nav>
<div class='card'>Article card with a <a href='https://example.com/guide'>useful link</a>.</div>
<button id='p' class='no-print'>Print this page</button>
<script>
  document.getElementById('p').addEventListener('click', function () { window.print(); });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 16px system-ui, sans-serif; }
  header { background: #264653; color: #fff; padding: 14px; }
  .wrap { display: grid; gap: 12px; padding: 12px; }
  .card { background: #eef2f7; padding: 16px; border-radius: 10px; }
  @media (min-width: 560px) { .wrap { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .wrap { grid-template-columns: repeat(3, 1fr); padding: 24px; gap: 20px; } }
  @media (min-width: 700px) and (orientation: landscape) { header { padding: 10px 14px; } }
  @media (max-height: 420px) { header { position: static; } }
</style>
<header>Combined queries</header>
<div class='wrap'>
  <div class='card'>1</div><div class='card'>2</div><div class='card'>3</div>
  <div class='card'>4</div><div class='card'>5</div><div class='card'>6</div>
</div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

var queries = {
  wide: '(min-width: 900px)',
  dark: '(prefers-color-scheme: dark)',
  reducedMotion: '(prefers-reduced-motion: reduce)',
  touch: '(pointer: coarse)'
};

Object.keys(queries).forEach(function (name) {
  var mql = window.matchMedia(queries[name]);
  console.log(name + ' -> ' + queries[name] + ' matches: ' + mql.matches);
  mql.addEventListener('change', function (event) {
    console.log(name + ' changed, matches now: ' + event.matches);
  });
});

console.log('Resize the preview or change system settings to see change events.');

Output

Press Run to execute.

Exercise: Build a Three Breakpoint GridHTML

Make the .cards container one column by default, two columns from 600px and four columns from 1000px using mobile-first min-width media queries. Keep a 16px gap.

Try it Yourself HTML

<style>
  .cards { display: grid; gap: 16px; }
  .card { background: #8ecae6; padding: 16px; border-radius: 8px; }
</style>
<div class='cards'><div class='card'>1</div><div class='card'>2</div><div class='card'>3</div><div class='card'>4</div><div class='card'>5</div><div class='card'>6</div><div class='card'>7</div><div class='card'>8</div></div>

Output

Press Run to execute.

Show expected output

Base grid has one column, @media (min-width: 600px) uses 2 columns and @media (min-width: 1000px) uses 4 columns

This is a self-check — compare your result with the expected output above.

Exercise: Write a Print StylesheetHTML

Add an @media print block that hides the nav and the button, sets body text to black on white at 12pt, prevents the article from breaking across pages, and prints the URL after each link.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; background: #f1f5f9; color: #334; }
  nav { background: #264653; padding: 10px; }
  nav a { color: #fff; }
  article { background: #fff; padding: 16px; }
</style>
<nav><a href='#'>Home</a></nav>
<article><h1>Guide</h1><p>Read <a href='https://example.com/docs'>the docs</a> for more.</p></article>
<button>Subscribe</button>

Output

Press Run to execute.

Show expected output

A @media print block with nav and button set to display: none, body font-size 12pt with black text, article break-inside: avoid and a[href]::after showing attr(href)

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Media Queries: Complete Guide

Trending keywords covered in this lesson

1. Media Query Syntax

2. min-width and max-width

3. Range Syntax (Modern)

4. Choosing Breakpoints

em vs px in media queries

5. Orientation, Aspect Ratio and Resolution

6. Input Capability Queries

7. User Preference Queries

8. Print Styles

9. Nesting and Combining

10. Media Queries in JavaScript

11. Media Queries vs Container Queries

12. Common Mistakes

Key Takeaways