What is Media query?
The short answer
A media query is a CSS rule that applies styles only when conditions are met, such as a screen width, dark mode preference or reduced-motion setting.
Media query, explained
Width queries power responsive layouts; preference queries like prefers-color-scheme and prefers-reduced-motion let sites respect how visitors set up their devices.
Questions people ask about Media query
What is Media query?
A media query is a CSS rule that applies styles only when conditions are met, such as a screen width, dark mode preference or reduced-motion setting.
Related terms
Responsive design is building one website whose layout adapts to every screen size, from phones to wide monitors, instead of separate mobile and desktop sites.
Container queriesContainer queries style an element based on the size of its own container rather than the whole screen, so components adapt wherever they are placed.
Reduced motionReduced motion is a device setting people turn on when animation makes them dizzy or distracted; sites should honour it by toning down or removing non-essential motion.
Dark modeDark mode is a colour theme with light text on a dark background, offered as an alternative to a light theme or matched to the visitor's system setting.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.