0
Responsive Design · Media Queries
New technique
Anatomy of a media query
A media query is a gate: the rules inside only pass through when the condition is true.
@mediaat-rule
(min-width: 48em) condition
{ .nav { display: flex; } }rules
A layout that works on a phone often wastes space on a monitor. Media queries let you add CSS that only applies under certain conditions, like “the screen is at least this wide”.
It starts with the at-rule @media, then a condition, then ordinary CSS rules in braces. Media features like min-width always go in parentheses. Leave them out and the whole query is invalid: the browser silently skips every rule inside it.
- The rules inside apply only while the condition matches, and stop again when it doesn't: resize the window and they switch live.
- Media queries only change CSS. The HTML stays exactly the same.