Media Queries

/* Basic */
@media screen and (max-width: 768px) { ... }

/* Media types */
@media screen { ... }  /* screen display */
@media print  { ... }  /* print preview / printed page */
@media all    { ... }  /* all devices (default) */
@media speech { ... }  /* screen readers */

/* No type = all */
@media (max-width: 768px) { ... }

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

/* Ranges: modern syntax (CSS Media Queries 4) */
@media (600px <= width <= 1200px) { ... }
@media (width >= 600px) { ... }
@media (width < 768px) { ... }

/* Logical operators */
@media screen and (min-width: 600px) { ... }  /* and */
@media screen, print { ... }                   /* or (comma) */
@media not screen { ... }                      /* not */
@media not (max-width: 600px) { ... }
@media (not (width < 600px)) and (not (width > 1000px)) { ... }
@media only screen and (min-width: 600px) { ... }  /* only — hides from old browsers */

/* Width and height of viewport */
@media (min-width: 600px) { ... }
@media (max-width: 1199px) { ... }
@media (width: 768px) { ... }

/* Device pixel ratio */
@media (min-height: 400px) { ... }
@media (max-height: 800px) { ... }

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

/* Aspect ratio */
@media (aspect-ratio: 16/9) { ... }
@media (min-aspect-ratio: 4/3) { ... }
@media (max-aspect-ratio: 1/1) { ... }

/* Device size (deprecated but common) */
@media (min-device-width: 375px) { ... }   /* avoid — use width instead */

/* DPI — dots per inch */
@media (min-resolution: 192dpi) { ... }
@media (resolution: 2dppx) { ... }    /* dppx = dots per pixel unit */

/* Device pixel ratio (WebKit prefix still common) */
@media (-webkit-min-device-pixel-ratio: 2) { ... }
@media (min-resolution: 2dppx) { ... }         /* standard */

/* Retina / HiDPI images */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
    background-size: 100px 50px;
  }
}

/* Mobile-first (add complexity up) — preferred */
.container { width: 100%; }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 1024px) { .container { max-width: 960px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }

/* Desktop-first (subtract complexity down) */
.sidebar { width: 260px; }
@media (max-width: 1023px) { .sidebar { width: 100%; } }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #eee; }
}
@media (prefers-color-scheme: light) {
  :root { --bg: #fff; --fg: #111; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .animated { animation: slide 0.3s ease; }
}

/* Contrast preference */
@media (prefers-contrast: more) {
  button { outline: 3px solid; }
}
@media (prefers-contrast: less) { ... }
@media (prefers-contrast: forced) { ... }

/* Reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgba(255,255,255,0.95); }
}

/* Inverted colors */
@media (inverted-colors: inverted) {
  img { filter: invert(1); }
}

/* Forced colors (Windows High Contrast mode) */
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
}
@media (forced-colors: none) { ... }

/* Pointing device precision */
@media (pointer: coarse) { /* touchscreen */
  button { min-height: 44px; }
}
@media (pointer: fine) { /* mouse */ }
@media (pointer: none) { /* no pointer */ }

/* Hover capability */
@media (hover: hover) {
  a:hover { text-decoration: underline; }
}
@media (hover: none) { /* touch-only */ }

/* Any input type available */
@media (any-pointer: coarse) { ... }
@media (any-hover: hover) { ... }

/* Color depth */
@media (color) { /* any color display */ }
@media (min-color: 8) { /* at least 8-bit color */ }
@media (color-gamut: srgb) { }
@media (color-gamut: p3)   { /* wide gamut display */ }
@media (color-gamut: rec2020) { }

/* Monochrome */
@media (monochrome) { }
@media (min-monochrome: 8) { }

/* Grid display (character cells — old terminals) */
@media (grid: 1) { }

/* Update rate */
@media (update: fast) { /* screen — animations fine */ }
@media (update: slow) { /* e-ink */ }
@media (update: none) { /* print */ }

/* Overflow (scrolling vs paged) */
@media (overflow-block: scroll) { }
@media (overflow-block: paged) { /* print */ }
@media (overflow-inline: scroll) { }

@media print {
  body { font-size: 12pt; color: #000; }
  nav, aside, .no-print { display: none; }
  a[href]::after { content: " (" attr(href) ")"; }
  h2, h3 { page-break-after: avoid; break-after: avoid; }
  img { max-width: 100%; }
  @page { margin: 2cm; }
}

@page {
  size: A4 portrait;
  margin: 2cm;
}
@page :first { margin-top: 4cm; }
@page :left  { margin-left: 3cm; }
@page :right { margin-right: 3cm; }
@page :blank { }

/* Declare container */
.card-wrapper {
  container-type: inline-size;          /* query by inline (width) */
  container-type: size;                 /* query by both width and height */
  container-name: card;
}
/* shorthand */
.card-wrapper { container: card / inline-size; }

/* Query the container */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}
@container card (min-width: 600px) {
  .card-title { font-size: 1.5rem; }
}

/* Container query units */
.card {
  padding: 5cqw;   /* 5% of container width */
  font-size: 2cqh; /* 2% of container height */
  /* cqi = inline size, cqb = block size */
  /* cqmin = smaller of cqi/cqb, cqmax = larger */
}

/* Query custom property values on a container */
@container style(--theme: dark) {
  .card { background: #111; color: #eee; }
}

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 1024px)">
<style media="screen and (max-width: 600px)">
  .nav { display: none; }
</style>

.card {
  padding: 1rem;

  @media (min-width: 768px) {
    padding: 2rem;
  }

  @container (min-width: 400px) {
    display: flex;
  }
}