CSS Media Queries

Adapt your designs to any device or user preference

Introduction to Media Queries

CSS media queries allow you to apply styles based on device characteristics, user preferences, and environmental conditions. They are a cornerstone of responsive web design, enabling your content to look great on any device.

Screen Size

Orientation

Color Scheme

Media Query Basics

What Are Media Queries?

Media queries are CSS techniques that apply styles based on:

Viewport width and height
Device orientation (portrait/landscape)
Display resolution and color capabilities
User preferences (dark mode, reduced motion)
Output type (screen, print, etc.)

/* Basic structure */
@media media-type and (media-feature) {
  /* CSS rules */
}

/* Common media types:
   - screen (default)
   - print
   - speech
   - all
*/

Why Use Media Queries?

Media queries enable responsive design, which is essential for:

Creating mobile-friendly websites
Adapting layouts to different screen sizes
Improving accessibility with user preferences
Optimizing print versions of web pages
Providing enhanced experiences on high-res displays

Did you know? Over 60% of web traffic now comes from mobile devices, making media queries more important than ever.

Media Query Syntax

Basic Syntax

The basic structure of a media query consists of:

The @media at-rule
An optional media type (defaults to all)
One or more media features with conditions
A block of CSS rules to apply when the conditions are met

/* Basic example */
@media (min-width: 768px) {
  /* Styles for screens wider than 768px */
}

/* With media type */
@media screen and (min-width: 768px) {
  /* Screen-specific styles */
}

/* Multiple conditions */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Styles for tablet devices */
}

/* Comma-separated (OR logic) */
@media (max-width: 767px), (orientation: portrait) {
  /* Styles for mobile OR portrait */
}

Common Media Features

Media features test specific characteristics of the user's device or environment:

width, height - Viewport dimensions
orientation - Portrait or landscape
aspect-ratio - Width to height ratio
resolution - Pixel density
prefers-color-scheme - Dark/light mode
prefers-reduced-motion - Accessibility

/* Width-based */
@media (min-width: 768px) { ... }

/* Orientation */
@media (orientation: landscape) { ... }

/* Pixel density */
@media (min-resolution: 2dppx) { ... }

/* Dark mode */
@media (prefers-color-scheme: dark) { ... }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { ... }

Advanced Features

Range Syntax

Modern CSS supports mathematical comparison operators in media queries for more concise syntax:

width > 600px - Width greater than 600px
width <= 1024px - Width 1024px or less
600px < width < 1200px - Width between values

Browser Support: Range syntax is supported in all modern browsers but not in IE.

/* Old syntax */
@media (min-width: 600px) and (max-width: 1024px) { ... }

/* New range syntax */
@media (600px <= width <= 1024px) { ... }

/* Other examples */
@media (width > 600px) { ... }
@media (height < 800px) { ... }
@media (400px < width < 1000px) { ... }

User Preference Features

Modern media queries can adapt to user preferences for better accessibility and user experience:

prefers-color-scheme - Dark/light mode
prefers-reduced-motion - Reduce animations
prefers-contrast - High contrast mode
prefers-reduced-transparency - Less transparency
prefers-reduced-data - Data saver mode

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}

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

/* High contrast */
@media (prefers-contrast: more) {
  body {
    color: black;
    background: white;
  }
}

Print Styles

Media queries can target print output to optimize how your page looks when printed:

Remove unnecessary elements (nav, ads)
Adjust colors for better print contrast
Ensure content fits page width
Add URL references after links
Control page breaks

@media print {
  /* Reset colors */
  body {
    color: #000 !important;
    background: #fff !important;
  }
  
  /* Hide unnecessary elements */
  nav, footer, .ad-banner {
    display: none;
  }
  
  /* Adjust typography */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* Show URLs */
  a::after {
    content: " (" attr(href) ")";
  }
  
  /* Page breaks */
  .page-break {
    page-break-after: always;
  }
  
  /* Avoid breaking inside elements */
  h1, h2, h3, p {
    page-break-inside: avoid;
  }
}

Practical Examples

Basic Width Query

Change styles based on viewport width

Mobile: Red background

Tablet: Yellow background

Desktop: Green background

/* Default mobile styles */
body {
  background-color: #f8f9fa;
  font-size: 16px;
}

/* Tablet styles */
@media (min-width: 768px) {
  body {
    background-color: #e9ecef;
    font-size: 18px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  body {
    background-color: #dee2e6;
    font-size: 20px;
  }
}/* Default mobile styles */
body {
  background-color: #f8f9fa;
  font-size: 16px;
}

/* Tablet styles */
@media (min-width: 768px) {
  body {
    background-color: #e9ecef;
    font-size: 18px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  body {
    background-color: #dee2e6;
    font-size: 20px;
  }
}

Print Styles

Special styles for printed documents

Hides navigation on print

Shows URLs after links

Optimizes font size for printing

/* Default screen styles */
body {
  font-family: Arial, sans-serif;
  color: #333;
  background: white;
  padding: 2rem;
}

/* Print styles */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
  }
  
  nav, footer, .no-print {
    display: none;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
  }
}/* Default screen styles */
body {
  font-family: Arial, sans-serif;
  color: #333;
  background: white;
  padding: 2rem;
}

/* Print styles */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
  }
  
  nav, footer, .no-print {
    display: none;
  }
  
  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
  }
}

Dark Mode Support

Adapt styles for user's color scheme preference

Light mode: White background

Dark mode: Dark background

Different accent colors

/* Light mode (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #3b82f6;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --accent-color: #60a5fa;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--accent-color);
}/* Light mode (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #3b82f6;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --accent-color: #60a5fa;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--accent-color);
}

Media Query Best Practices

Do's:

Use mobile-first approach (min-width queries)
Organize media queries near their related styles
Use em units for more consistent breakpoints
Test on real devices whenever possible
Consider user preference features for accessibility
Use print styles for printer-friendly versions

Don'ts:

Don't target specific devices (focus on features)
Avoid too many small breakpoints (content should guide you)
Don't duplicate styles unnecessarily
Avoid !important in media queries
Don't forget to test both portrait and landscape
Avoid hiding important content on smaller screens

Experiment with Media Queries

Try out media queries in our interactive editor with live preview:

Test responsive layouts with width queries
Experiment with dark mode preferences
Create printer-friendly styles
Try out the new range syntax

/* Example media queries to try */
/* Width-based */
@media (768px <= width <= 1024px) {
  /* Tablet styles */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #f0f0f0;
  }
}

/* Print styles */
@media print {
  nav, footer { display: none; }
  body { font-size: 12pt; }
}

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

< Previous (Responsive Design)Next (HTML Symbols) >