Media queries let CSS conditionally apply a block of styles only when specific characteristics of the current device or viewport, like its width, are true, forming the foundation of responsive web design.

Syntax

@media (condition) {
  /* styles applied only when condition is true */
}

Deep Dive Course

A media query combines a media type, like screen or print, with one or more feature conditions in parentheses, like (max-width: 600px), and the enclosed CSS rules only take effect when every specified condition currently evaluates to true — multiple conditions can be combined with and, and multiple separate queries combined with a comma act as a logical or, matching if any one of them is true. The mobile-first approach to responsive design writes base styles for the smallest screens outside any media query, then uses min-width queries to progressively add or override styles for larger screens, rather than the reverse, desktop-first approach using max-width queries to scale down.

1Understanding Media Queries

💡

Prefer a mobile-first approach, base styles unwrapped for small screens, then min-width media queries progressively enhancing for larger ones, over a desktop-first approach using max-width queries to scale down — mobile-first generally produces simpler, more maintainable CSS as a project grows.

editor.html

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

localhost:3000

2Practical Example

Here is a real-world application of Media Queries showing how it is used in production CSS code.

editor.html

@media (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

localhost:3000

3Best Practices

Follow these guidelines when working with Media Queries:

1. Use min-width media queries in a mobile-first approach, writing base styles for small screens first and adding enhancements for larger ones

2. Combine multiple conditions with and within a single media query when several conditions must simultaneously be true, like a specific width range

3. Test actual responsive breakpoints against real content and design needs, rather than blindly copying common device-specific pixel width breakpoints from elsewhere

⚠️

Tip: Prefer a mobile-first approach, base styles unwrapped for small screens, then min-width media queries progressively enhancing for larger ones, over a desktop-first approach using max-width queries to scale down — mobile-first generally produces simpler, more maintainable CSS as a project grows.

editor.html

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

localhost:3000

Examples

Example 01Basic Usage

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Example 02Advanced Example

@media (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

Best Practices

Use min-width media queries in a mobile-first approach, writing base styles for small screens first and adding enhancements for larger ones
Combine multiple conditions with and within a single media query when several conditions must simultaneously be true, like a specific width range
Test actual responsive breakpoints against real content and design needs, rather than blindly copying common device-specific pixel width breakpoints from elsewhere

Interview Question

Why does a mobile-first approach to media queries, using min-width, generally produce simpler, more maintainable CSS than a desktop-first approach using max-width?▼

Hint: Think about how many separate override layers each approach tends to accumulate as more breakpoints are added over time, and how those overrides interact with the CSS cascade.

In a mobile-first approach, base styles written outside any media query represent the simplest, smallest-screen version of the design, and each subsequent min-width media query then only adds or enhances styles as the screen grows larger, meaning each breakpoint layer builds progressively and cleanly on top of the previous one without needing to override or undo anything from a more complex, larger-screen state, since the base case is deliberately the simplest one. A desktop-first approach instead starts from the most complex, full desktop layout as the unwrapped base case, and each subsequent max-width media query then has to actively override or undo specific desktop-oriented styles to scale the design back down for smaller screens, which tends to require writing more overriding CSS overall as more breakpoints are added, and can create subtle ordering and specificity conflicts between the various override layers stacking on top of each other. This is exactly why mobile-first's progressive-enhancement direction, building up complexity as screens grow, tends to result in less overall CSS and fewer confusing override chains than desktop-first's progressive-simplification direction, tearing complexity back down as screens shrink.

Exercises

MediumPractice using Media Queries in a real scenario.

View Solution

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

Frequently Asked Questions

Why does a mobile-first approach to media queries, using min-width, generally produce simpler, more maintainable CSS than a desktop-first approach using max-width?▼

Related Functions

RefScreenDimensionsOrientationResolution