A media query is a CSS condition that checks a screen feature, such as viewport width. When the condition is true, the browser applies its style rules; otherwise, it ignores them. section 12.2.9
Media queries help create adaptive layouts. A narrow viewport can switch a multi-column page to one column, making text and page regions more comfortable to use on a smartphone. section 12.2.9
The basic pattern uses a condition followed by CSS rules:
- Use max-width when styles should apply at or below a breakpoint. section 12.2.9
- Use min-width when styles should apply at or above a breakpoint. section 12.2.9
- Put the styles inside the media query’s code block so the browser can apply them conditionally. section 12.2.9
Switch the main area to one column
Use @media (max-width: 500px) { main { display: grid; grid-template-columns: 1fr; } } to make the main element a one-column grid on screens no wider than 500 pixels. A larger-screen rule can instead set h1 { font-size: 72px; } at min-width: 1024px.
To check that a responsive rule works, load the page in a smartphone browser and confirm that the header, logo, text sizes, and main area adapt as intended. section 12.2.10
