Get full access
Quiz

Have you used or implemented media queries or mobile-specific layouts/CSS?

Topics
CSS
Edit on GitHub

Media queries are a CSS feature that applies styles conditionally based on characteristics of the user's device or viewport, such as width, height, orientation, resolution, or user preferences. They are the foundation of responsive design and let a single CSS file adapt a layout across phones, tablets, and desktops.

Syntax

A media query consists of a media type (e.g. screen, print — see media types) and one or more expressions that evaluate to true or false. When the expressions match, the styles inside the block are applied.

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


@media (min-width: 768px) and (orientation: landscape) {
  .hero {
    height: 80vh;
  }
}

Common features queried include:

  • min-width / max-width: viewport width thresholds for breakpoints.
  • orientation: portrait or landscape.
  • prefers-color-scheme: light or dark for theming.
  • prefers-reduced-motion: whether the user has requested reduced animations.
  • hover and pointer: whether the primary input has hover capability and how precise it is (e.g. coarse for touch).

Mobile-first vs desktop-first

There are two common approaches to structuring breakpoints:

  • Mobile-first uses min-width queries to layer styles on top of a mobile baseline. This is generally preferred — mobile styles are the default, and larger screens receive progressive enhancements.
  • Desktop-first uses max-width queries to scale a desktop design down. This is easier when retrofitting an existing desktop site but tends to produce more override-heavy CSS.
/* Mobile-first (recommended) */
.nav {
  flex-direction: column;
}


@media (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
}

See responsive vs mobile-first for the trade-offs.

Practical example

Transforming a stacked pill navigation into a fixed-bottom tab bar on smaller screens:

.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


@media (max-width: 640px) {
  .nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-around;
    border-top: 1px solid #e5e7eb;
    background: #fff;
  }
}

Beyond viewport width

Media queries aren't only about screen size. They also let you respect user preferences and device capabilities, which is important for accessibility and UX:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --fg: #eee;
  }
}


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


@media (hover: none) and (pointer: coarse) {
  .tooltip {
    display: none; /* No hover on touch devices */
  }
}

Alternatives and newer features

  • Container queries (@container): style a component based on the size of its container rather than the viewport. This is useful for reusable components whose layout should adapt regardless of where they are placed on the page.
  • CSS Flexbox and Grid: often reduce the number of breakpoints needed. flex-wrap, minmax(), and auto-fit/auto-fill can produce fluid layouts that adapt without explicit media queries.
  • Viewport units (vw, vh, svh, dvh): scale sizing with the viewport directly.

References

Edit on GitHub