CSS Media Queries

Create responsive, adaptive designs that work beautifully across all devices!

What Are CSS Media Queries?

CSS Media Queries allow you to apply different styles based on device characteristics like screen size, resolution, orientation, and more. They're the foundation of responsive web design, enabling your website to adapt to different viewing environments.

Media queries use the @media rule to conditionally apply CSS when a specific condition is true.

Responsive Design: Adapt layouts for different screen sizes
Device Targeting: Apply styles based on device capabilities
Print Styling: Create specialized styles for printed pages
Accessibility: Adjust for user preferences like reduced motion

Example 1: Basic Media Query Syntax

/* Default styles */
.responsive-box {
  background-color: #3498db;
  color: white;
  padding: 1.25rem;
  width: 100%;
  text-align: center;
}

/* Apply when screen width is 37.5rem or less */
@media (max-width: 37.5rem) {
  .responsive-box {
    background-color: #e74c3c;
    font-size: 0.9rem;
  }
}

Resize your browser window to see this box change!

This box changes color and font size when the viewport width is 37.5rem or less.

Media Query Components

@media: The at-rule that begins a media query
Media Type: Optional specification of the media type (e.g., screen, print, all)
Media Features: Conditions about the user agent or display device (e.g., width, height, orientation)
Logical Operators: and, not, only, and commas (which act as OR operators)

Basic syntax: @media [media-type] [and/not/only] ([media-feature]) { /* CSS rules */ }

Example 2: Media Types & Features

/* Styles for screens with dark color scheme */
@media screen and (prefers-color-scheme: dark) {
  .theme-aware {
    background-color: #222;
    color: #f0f0f0;
    border-color: #444;
  }
}

/* Styles for print */
@media print {
  .theme-aware {
    background-color: white !important;
    color: black !important;
    border: 0.0625rem solid black !important;
  }
}

This box adapts to your system's color scheme preference and will have special styling when printed.

If your system is set to dark mode, this box will have a dark background.

Common Media Features

width, min-width, max-width: Viewport width
height, min-height, max-height: Viewport height
orientation: Portrait or landscape
aspect-ratio: Width-to-height ratio of viewport
resolution: Pixel density of the output device
prefers-color-scheme: User's color scheme preference (light or dark)
prefers-reduced-motion: User's motion preference
hover: Whether the device supports hover interactions
pointer: Precision of the primary input mechanism (coarse, fine, none)

Example 3: Complex Media Queries

/* Base styles */
.complex-demo {
  background-color: #3498db;
  color: white;
  padding: 1.25rem;
  border-radius: 0.5rem;
  text-align: center;
}

/* Medium screens in landscape mode */
@media (min-width: 37.5rem) and (max-width: 64rem) and (orientation: landscape) {
  .complex-demo {
    background-color: #9b59b6;
    border-radius: 1rem;
  }
}

/* High-resolution displays */
@media (min-resolution: 2dppx) {
  .complex-demo {
    border: 0.125rem solid gold;
  }
}

This box has different styles based on complex conditions.

This example demonstrates combining multiple conditions and targeting high-resolution displays.

Mobile-First vs. Desktop-First

Mobile-First Approach

Start with styles for small screens, then add complexity for larger screens using min-width queries.

/* Base styles for mobile */
.element { width: 100%; }

/* Tablet and up */
@media (min-width: 48rem) {
  .element { width: 50%; }
}

/* Desktop */
@media (min-width: 64rem) {
  .element { width: 33.33%; }
}

Desktop-First Approach

Start with styles for large screens, then simplify for smaller screens using max-width queries.

/* Base styles for desktop */
.element { width: 33.33%; }

/* Tablet and down */
@media (max-width: 63.9375rem) {
  .element { width: 50%; }
}

/* Mobile */
@media (max-width: 47.9375rem) {
  .element { width: 100%; }
}

Example 4: Responsive Layout

.responsive-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.responsive-item {
  flex: 1 1 100%;
  background-color: #3498db;
  color: white;
  padding: 1.25rem;
  text-align: center;
  border-radius: 0.5rem;
}

@media (min-width: 37.5rem) {
  .responsive-item {
    flex: 1 1 calc(50% - 0.625rem);
  }
}

@media (min-width: 56.25rem) {
  .responsive-item {
    flex: 1 1 calc((100% - 2.5rem) / 3);
  }
}

Item 1

Item 2

Item 3

Resize the window to see how these items adapt from 1 column to 2 columns to 3 columns.

Best Practices & Tips

Mobile-First: Start with base styles for mobile, then enhance for larger screens.
Use Relative Units: Prefer em, rem, %, and viewport units for flexible layouts.
Logical Breakpoints: Base breakpoints on your content, not specific devices.
Test Thoroughly: Check your design on various devices and screen sizes.
Avoid Device-Specific Queries: Focus on screen characteristics, not specific devices.
Consider User Preferences: Use queries like prefers-color-scheme and prefers-reduced-motion.
Minimize Media Query Count: Too many breakpoints can lead to maintenance challenges.

Example 5: User Preference Media Queries

/* Respect user's motion preferences */
.animated-element {
  transition: transform 0.3s ease;
}
.animated-element:hover {
  transform: scale(1.1);
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
  }
  .animated-element:hover {
    transform: none;
  }
}

Hover over me!

This element animates on hover, but respects the user's reduced motion preference if enabled.