A media query lets CSS ask a question about the screen, then apply a group of style rules only when the answer is true. It is the little traffic cop that helps a layout behave on different devices. section 14.4
The question usually checks viewport width with max-width or min-width. A max-width query handles screens no wider than a value; a min-width query handles screens at least that wide. The @media rule can omit the media type because screen is the web default. section 14.4
Shrink the title on small screens
This rule changes the h1 size when the viewport is 350 pixels wide or less: @media (max-width: 350px) { h1 { font-size: 24px; } } For a larger layout, a min-width query can display the sidebar as an inline block at 1024 pixels and above. section 14.4
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"article article sidebar"
"footer footer footer";
}
h1 {
font-size: 32px;
}
@media (max-width: 450px) { #1
.container {
grid-template-columns: 1fr; #2
grid-template-areas: #2
"header" #2
"article" #2
"sidebar" #2
"footer"; #2
}
h1 {
font-size: 24px; #3
}
}
See a complete adaptive grid: wider screens use three columns, while screens under 450 pixels switch to one stacked column and reduce the title size. section 14.4
Use media queries to:
- Change element sizes when the viewport becomes too narrow. section 14.4
- Change a grid from columns to a stacked layout. section 14.4
- Hide or display elements at suitable screen sizes. section 14.12
- Support a mobile-first layout by adding features for larger screens. section 14.12
