Codectionary / Developer documentation / CSS

Media Queries

Media queries apply CSS conditionally based on characteristics of the device or viewport, most commonly width, forming the foundation of responsive design. They use the @media at-rule with a condition, and can be combined with and/or logic to test multiple conditions at once.

Syntax

@media (min-width: 768px) { }

Examples

Mobile-First Breakpoints

The recommended approach - base styles for mobile, then progressively enhance for larger screens.

/* Demo setup: sizing, structure or neutral surfaces. */
.container{border:2px solid #a16207;background:#fef3c7;color:#422006;box-sizing:border-box}

.container {
  padding: 16px; /* mobile default */
}

@media (min-width: 768px) {
  .container {
    padding: 32px;
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}
  1. The reading column is the element targeted by the media rules.
  2. The iframe width determines which width breakpoint matches.
  3. Resize the preview and compare padding and maximum width at each breakpoint.
HTML used by this example
<main class="container"><h3>Responsive reading column</h3><p>This content shows how the container changes at its breakpoints. This content shows how the container changes at its breakpoints. This content shows how the container changes at its breakpoints. This content shows how the container changes at its breakpoints. </p></main>

Combining Conditions

Testing multiple media features together, and targeting print output.

/* Demo setup: sizing, structure or neutral surfaces. */
.sidebar{display:none;padding:1rem;background:#dcfce7;color:#14532d}

@media (min-width: 768px) and (orientation: landscape) {
  .sidebar { display: block; }
}

@media print {
  .no-print { display: none; } /* hide navigation, buttons, etc when printing */
}
  1. The sidebar is hidden by default so the matching media rule has an observable effect.
  2. Both width and orientation must match the combined condition.
  3. The no-print control is tested with print media; it is not expected to disappear during normal screen viewing.
HTML used by this example
<aside class="sidebar">Landscape, wide-view sidebar</aside><main><h3>Printable lesson</h3><button class="no-print">Screen-only action</button><p>Use browser print preview to test print rules.</p></main>

Parameters and values

  • min-width / max-width (feature): Tests viewport width, the most common responsive breakpoint
  • orientation (feature): Tests portrait vs landscape orientation
  • print (media type): Applies styles specifically for printed output

Best practices

  • Write mobile-first CSS using min-width breakpoints, progressively adding complexity for larger screens, rather than max-width desktop-first overrides
  • Base breakpoints on where your own content actually starts looking cramped or awkward, rather than copying generic device-width numbers
  • Prefer container queries over media queries for component-level responsiveness - reserve media queries for page-level, viewport-driven layout
  • Use @media print to hide non-essential UI (navigation, buttons) and optimize layout specifically for printed pages

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading