CSS @media Rule

What You’ll Learn

The @media rule lets you apply styles based on device characteristics — viewport width, orientation, print mode, hover capability, and more. This hub explains media query syntax and links to 24 feature tutorials with try-it examples.

Introduction

The @media rule in CSS is a powerful feature that applies styles based on the characteristics of the device or viewport displaying the content. It is essential for responsive designs that adapt to various screen sizes and device types, ensuring a seamless experience across phones, tablets, and desktops.

What Are Media Queries?

A media query is the condition inside @media. When the condition is true, the enclosed CSS rules apply; when false, they are ignored. Combine multiple conditions with and, or, or not for precise targeting.

Default Value

The @media rule has no default value — it only activates when you write a query. If no media query matches, the default styles outside @media blocks are used.

📝 Syntax

The syntax for @media involves a media query that defines when the enclosed styles apply:

@media media-type and (condition) {
  /* CSS rules here */
}

media-type is optional (screen, print, all). condition is a media feature and value, such as max-width: 600px or orientation: landscape.

Property Values

Common patterns

/* Mobile-only (max-width) */
@media (max-width: 600px) { }

/* Desktop-up (min-width, mobile-first) */
@media (min-width: 768px) { }

/* Print stylesheet */
@media print { }

/* Combined conditions */
@media screen and (min-width: 600px) and (orientation: landscape) { }

When to Use Media Queries

• Responsive layouts — Stack columns on phones, expand grids on desktops with min-width / max-width.
• Print styles — Hide navbars, expand links, use black text on white with @media print.
• Touch vs mouse — Larger tap targets when (hover: none); hover effects when (hover: hover).
• Orientation — Adjust layouts when the device rotates to landscape.
• Accessibility — Reduce motion when prefers-reduced-motion: reduce.

Examples Gallery

Five responsive patterns from the reference guide. Resize the window or use DevTools device mode to test width-based 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;
  }
}

💬 Usage Tips

• Mobile-first — Write base styles for small screens; use min-width to enhance.
• Viewport meta tag — Required for accurate width queries on mobile.
• Logical breakpoints — Use content-based breakpoints, not just device sizes.
• DevTools — Chrome and Firefox device mode tests media queries instantly.
• Separate print CSS — Keep print rules in a dedicated @media print block.

⚠️ Common Pitfalls

• Missing viewport meta — Mobile browsers may use a fake wide viewport without it.
• Too many breakpoints — Start with 2–3; add more only when content breaks.
• px vs em in queries — em in media queries is relative to browser default, not your root font-size.
• Hover on touch — Do not rely on hover alone; use any-hover or provide touch alternatives.
• Print color waste — Dark backgrounds on screen can waste ink when printed.

♿ Accessibility

• prefers-reduced-motion — Disable or shorten animations for users who request it.
• prefers-contrast — Offer higher-contrast styles when supported.
• Touch targets — Use (pointer: coarse) to enlarge buttons on touch devices.
• Readable at all sizes — Test typography at every breakpoint, not just desktop.
• Do not hide critical content — display: none on mobile must not remove essential info.

💡 Best Practices