A media query applies a block of CSS only while the device or viewport matches a condition, such as a minimum width. The browser re-checks the condition as the window resizes, so the styles switch live.
/* Mobile first approach */
.container {
width: 100%;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
The example is mobile first. The base rule styles the smallest screens, and each min-width block layers on changes once the viewport is wide enough. On a wide screen both blocks match, and the desktop width wins because it comes later with the same specificity.
The features queried most are the viewport's width and height. orientation and resolution cover screen shape and pixel density. Media queries also test user preferences such as prefers-color-scheme, and media types such as print. Conditions combine with and, and a comma between queries means or.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓