The basic syntax of media queries

Basic Syntax of Media Queries

Media queries are a powerful feature introduced in CSS3 that allow applying different style rules based on device characteristics (such as viewport width, screen orientation, or resolution). The core syntax consists of the @media rule, followed by a media type and media feature expression.

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

Media Types

Media types specify the category of devices the query applies to. Common types include:

• all: All devices (default)
• screen: Color screen devices
• print: Print preview mode
• speech: Speech synthesizers

@media print {
  body {
    font-size: 12pt;
    color: black;
  }
  .sidebar {
    display: none;
  }
}

Media Feature Expressions

Media features are combined using logical operators. Common features include:

• width/height: Viewport dimensions
• min-width/max-width: Minimum/maximum viewport width
• orientation: Orientation (portrait/landscape)
• resolution: Device resolution
• aspect-ratio: Aspect ratio

/* Applied when viewport width is at least 768px */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Landscape devices with width greater than 1024px */
@media (orientation: landscape) and (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

Logical Operators

Media queries support three logical operators:

1. and: Combines multiple conditions (AND)
2. , (comma): Equivalent to OR
3. not: Negates the entire query

/* Width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  .card {
    flex-basis: 50%;
  }
}

/* Printers or screens narrower than 480px */
@media print, (max-width: 480px) {
  .ad-banner {
    display: none;
  }
}

/* Non-screen devices */
@media not screen {
  .interactive-element {
    visibility: hidden;
  }
}

Common Breakpoints

While breakpoints should be content-specific, common reference values include:

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices (tablets, ≥576px) */
@media (min-width: 576px) { ... }

/* Medium devices (desktops, ≥768px) */
@media (min-width: 768px) { ... }

/* Large devices (large desktops, ≥992px) */
@media (min-width: 992px) { ... }

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) { ... }

Modern CSS Improvements

The CSS4 draft introduces range context syntax, simplifying width range expressions:

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

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

Nested Media Queries

Media queries can be nested within CSS rules to reduce code duplication:

.card {
  padding: 1rem;
  
  @media (min-width: 768px) {
    padding: 2rem;
    display: flex;
  }
}

Practical Example

Implementation of a responsive navigation bar:

.nav {
  display: block;
  background: #333;
}

.nav-item {
  display: block;
  padding: 10px;
  color: white;
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }
  .nav-item {
    flex: 1;
    text-align: center;
  }
}

Performance Considerations

1. Avoid excessive media queries that bloat stylesheets
2. Using em instead of px provides better accessibility
3. Mobile-first approach is generally more efficient:

/* Mobile-first approach */
.base-styles {
  /* Mobile styles */
}

@media (min-width: 768px) {
  /* Tablet styles */
}

@media (min-width: 1024px) {
  /* Desktop styles */
}

Browser Support and Detection

Modern browsers widely support media queries, but older IE versions may require polyfills. Media queries can be detected via JavaScript:

const mediaQuery = window.matchMedia('(min-width: 768px)');

function handleTabletChange(e) {
  if (e.matches) {
    console.log('Screen width ≥768px');
  }
}

mediaQuery.addListener(handleTabletChange);
handleTabletChange(mediaQuery);

Advanced Feature Applications

1. Adapting to dark mode with prefers-color-scheme:

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #f0f0f0;
  }
}

2. Reducing animations with prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

3. Adapting to high-resolution devices:

@media 
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
    .logo {
      background-image: url('logo@2x.png');
    }
  }

Media Queries vs. Container Queries

CSS container queries are an emerging technology that allows styling based on parent container size rather than viewport:

.component {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .component {
    /* Styles when container width ≥500px */
  }
}