The same CSS file has to dress a phone held upright and a desktop monitor, without ever knowing in advance which of the two will display the page. That is the problem the media query was invented to solve: it lets part of a stylesheet switch on or off depending on the characteristics of the screen showing the page, starting with its width.
Before media queries, a site had to choose between one layout forced onto every screen size, or several separate stylesheets maintained side by side. One CSS rule replaced both: it is the historical starting point of everything now called responsive design.
Definition
A media query is a condition written with the @media at-rule: the block of CSS it wraps only applies if the condition is true. The most common condition tests the width of the window, but it can just as well test the screen's orientation, whether a mouse-like hover exists, or the color preference chosen in the system.
Syntax and operators
The most common form compares the window width against a threshold using min-width or max-width. Several conditions combine with and, and several independent media queries combine with a comma, which behaves like an or.
.card {
display: block;
}
@media (min-width: 768px) {
.card {
display: flex;
gap: 16px;
}
}
@media (min-width: 600px) and (max-width: 900px) {
.card {
padding: 12px;
}
}The base style, written outside any media query, applies to every screen. The block inside @media (min-width: 768px) then completes or overrides it, but only from 768 pixels wide upward: that is the Mobile first logic, starting from the simplest layout and adding as the width grows rather than the other way around.
What media queries can test
Width is only the first of the available conditions. The table below lists the media features used most often in practice, before even reaching more exotic cases.
| Condition | What it detects |
|---|---|
min-width / max-width | The window width, to set a Breakpoint |
orientation | Portrait or landscape, useful on tablets |
hover | Whether a hover-capable pointer exists (mouse versus finger) |
prefers-color-scheme | The dark mode chosen in the system |
print | The page is being printed rather than shown on screen |
The unit and overlap trap
Two overlapping media queries, one with min-width: 600px and the other with min-width: 900px, both apply past 900 pixels. If both set the same property, the order in the file decides which one wins, exactly like two ordinary CSS rules: a media query's specificity does not come into play, only the file order does.
min-width: 1200px placed before one at min-width: 768px can get overridden by that later rule even though it looks more specific, simply because it appears earlier in the file.Media queries and fluid units
Media queries remain essential, but they are no longer the only tool for responsive design. Properties such as clamp() let a size vary continuously without a sharp jump at one precise threshold, and the Container query reacts to the width of a parent block instead of the whole window. Media queries stay the right choice for anything that genuinely depends on the screen itself: orientation, color preference, or printing. Our HTML and CSS course builds a full responsive layout step by step, from the very first breakpoint to fluid units.
Frequently asked questions
em?Both work, but em follows the font size a person has set in their browser while px stays fixed. A media query written in em shifts its threshold when someone has enlarged their default text, which keeps the site's behavior closer to what that person actually expects.
Yes, widely so. Orientation, hover capability, color preference, or even the fact that a page is being printed are all equally valid conditions, each written with its own media feature inside the parentheses after @media.
The most frequent cause is a missing meta viewport tag in the HTML. Without it, a phone renders the page at desktop scale and then shrinks it visually, so width-based media queries never trigger the way they were meant to.