Frontend
What is Media Query?
A CSS rule that applies styles conditionally based on viewport size, resolution, orientation, or user preferences.
Definition
Media queries (@media) gate CSS on characteristics of the rendering environment: width and height ranges, pointer accuracy, display density, and increasingly user preferences like prefers-color-scheme for dark mode, prefers-reduced-motion for accessibility, and prefers-contrast. Modern range syntax (width >= 768px) reads more naturally than min-/max- prefixes. The newer container queries (@container) shift the paradigm from viewport-based to component-based responsiveness, letting a card adapt to its parent's width rather than the screen's—critical for design systems where components appear in many contexts.