Media Queries

Media Queries

@media covers @media syntax and Media Queries in HTML the features. Beyond width, these widely available features adapt to how a person uses the device:

Range, input and preference queries in practiceCSS

@media (40rem <= width < 64rem) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) {          /* mouse or trackpad as the main input */
  .card .actions { opacity: 0; }
  .card:hover .actions, .card:focus-within .actions { opacity: 1; }
}
@media (pointer: coarse) { .toolbar button { min-block-size: 44px; } }   /* fingers */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .badge { border: 1px solid CanvasText; } }

hover and pointer test the primary input; any-hover and any-pointer test every device. Never hide a control behind hover alone, and make targets at least 24 by 24 CSS pixels (WCAG 2.2, level AA).
prefers-reduced-motion follows the operating system setting. A near-zero duration, unlike animation: none, still fires animationend and transitionend.
forced-colors: active matches Windows contrast themes, which replace your colors and remove box-shadow; add borders in system colors such as CanvasText.
prefers-color-scheme is in Dark Mode; matchMedia() runs queries from JavaScript (Matching Media Queries).

MENU