CSS Media Queries

Definition and Usage

Media queries let your CSS react to the device and viewport—width, orientation, print mode, hover ability, and more. You write them with the @media rule so styles apply only when a condition is true.

@media vs media query

The @media rule is the CSS at-rule that wraps a block of styles. The media query is the condition after @media (for example (max-width: 600px)). When the query matches, those styles apply; when it does not, the browser ignores that block.

What should beginners learn first?

Start with width (min-width / max-width) for responsive layouts, then print for paper styles, orientation for portrait vs landscape, and hover for mouse vs touch. Those cover most CSS tutorial needs.

Hub vs single-feature pages

This page teaches how media queries work in a CSS tutorial. Each name in the index links to a focused feature guide (for example CSS width Media Feature). For the properties you change inside a query, see CSS Properties; for targeting elements, see CSS Selectors.

CSS Syntax

An @media rule takes an optional media type plus one or more features:

@media media-type and (feature: value) {
  /* CSS rules here */
}

/* Everyday patterns */
@media (max-width: 600px) { }
@media (min-width: 768px) { }
@media print { }
@media screen and (min-width: 600px) and (orientation: landscape) { }

media-type is optional (screen, print, all). Features sit in parentheses and can be chained with and.

Core CSS Concepts

How media queries are grouped when you style real pages:

Common queries cheat sheet

When to use which query

How to Use Media Queries in CSS

A practical workflow for this tutorial track:

1. Add the viewport meta tag to your HTML document.
2. Write base styles for the smallest screen you support.
3. Add @media (min-width: …) blocks to enhance tablet and desktop layouts.
4. Use @media print for print-only tweaks (hide chrome, dark text on white).
5. Wrap hover-only polish in (hover: hover) so touch users are not blocked.
6. Open a feature page from the index when you need values, examples, and FAQs.

Live Preview

Drag the slider to simulate viewport width. Below 600px the sample switches styles—same idea as @media (max-width: 600px).

CSS Examples

Five everyday patterns from a CSS tutorial: max-width, print, orientation, mobile-first min-width, and combined queries.

body {
  color: #1e293b;
}

@media (max-width: 600px) {
  body {
    color: #dc2626;
  }
}

body {
  background-color: #e2e8f0;
}

@media print {
  body {
    background-color: #fff;
  }
}

body {
  color: #1e293b;
}

@media (orientation: landscape) {
  body {
    color: #2563eb;
  }
}

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

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

@media screen and (min-width: 600px) and (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

CSS Media Feature Tutorial Index

Search by feature name or browse by category. Every row links to a full guide with try-it examples and FAQs (24 tutorials).

Key Takeaways