Media Query

ELI5 — The Vibe Check

A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.' You can check width, height, orientation, dark mode preference, and more. The backbone of responsive design.

Real Talk

A media query is a CSS at-rule (@media) that applies styles conditionally based on device characteristics such as viewport width, height, orientation, resolution, or color scheme preference. Media queries are fundamental to responsive design and are now also usable in JavaScript via window.matchMedia().

Show Me The Code

@media (max-width: 768px) {
  .nav { flex-direction: column; }
  .sidebar { display: none; }
}

@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #fff; }
}

When You'll Hear This

"Write a media query to hide the sidebar on mobile." / "Use prefers-color-scheme media query for automatic dark mode."