CSS Advanced

CSS Media Queries

Media queries let CSS respond to the device: screen width, orientation, colour-scheme preference and more. They are the core of responsive design. This guide covers @media syntax, breakpoints, mobile-first ordering, and user-preference queries, with live examples.

What Is a Media Query?

A media query wraps a block of CSS in a condition. The rules inside apply only when the condition is true — for example when the viewport is at least a certain width, or when the user prefers a dark theme. This lets one stylesheet adapt to phones, tablets and desktops.

/* Applies only when the viewport is 768px wide or more */
@media (min-width: 768px) {
  .sidebar { display: block; }
}

Common Features and Breakpoints

Feature	Matches when	Example
min-width	Viewport is at least the value	(min-width: 768px)
max-width	Viewport is at most the value	(max-width: 767px)
orientation	Portrait or landscape	(orientation: landscape)
prefers-color-scheme	User's theme preference	(prefers-color-scheme: dark)
prefers-reduced-motion	User dislikes animation	(prefers-reduced-motion: reduce)

Breakpoint	Typical min-width	Targets
Small	640px	Large phones
Medium	768px	Tablets
Large	1024px	Laptops
Extra large	1280px	Desktops

A Responsive Layout

The cards below stack in one column on narrow screens and switch to a row when there is room. Resize the preview to see the layout change at the breakpoint.

Run this — resize the preview to reflow

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .cards { display: flex; flex-direction: column; gap: 10px; }
  .cards div {
    background: #6366f1; color: #fff;
    padding: 20px; border-radius: 8px;
    font: 14px sans-serif; text-align: center;
  }
  @media (min-width: 600px) {
    .cards { flex-direction: row; }
    .cards div { flex: 1; }
  }
</style>
</head>
<body>
  <div class="cards">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
  </div>
</body>
</html>

💡

Prefer a mobile-first approach: write the base styles for small screens, then add min-width queries to layer on enhancements for larger screens. It keeps CSS simpler and faster on phones.

Dark Mode With prefers-color-scheme

prefers-color-scheme reads the operating system theme so your page can match it automatically. Combined with CSS variables, a single query flips the whole palette.

Run this — matches your OS light/dark setting

Example

<!DOCTYPE html>
<html>
<head>
<style>
  :root { --bg: #ffffff; --fg: #0f172a; }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #0f172a; --fg: #e2e8f0; }
  }
  body { background: var(--bg); color: var(--fg); font: 16px sans-serif; padding: 24px; transition: background .3s; }
</style>
</head>
<body>
  <h3>Adaptive theme</h3>
  <p>Change your system theme to light or dark and reload to see this page follow it.</p>
</body>
</html>

Combining Conditions

Combine features with and, list alternatives with a comma (meaning or), and negate with not.

/* Tablet-only portrait */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .panel { padding: 24px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

⚠️

min-width and max-width can overlap at the boundary. Use non-equal values like max-width: 767px with min-width: 768px so a single width never matches both queries.

Key points

@media applies CSS only when its condition is true.
min-width and max-width create responsive breakpoints.
Write mobile-first base styles, then enhance with min-width queries.
prefers-color-scheme adapts to the OS light or dark theme automatically.
Combine conditions with and, or (comma) and not, and honour prefers-reduced-motion.