A media query is CSS that asks a question about the current screen, then uses its enclosed rules only when the answer is yes. Think of it as a layout switch: below one width, stack columns; above another, reveal an extra panel. Layouts that adjust this way are adaptive. section 13.12
A media query has two small parts:
- The @media expression names a condition, such as a maximum or minimum viewport width. section 13.12
- The block contains ordinary CSS rules that the browser applies only when that condition matches. section 13.12
Make room for a narrow screen
When the viewport is 450px wide or narrower, remove floats so article and aside stack at full width. The same query can shrink the heading and change the main background: @media (max-width: 450px) { article, aside { float: none; width: 100%; } h1 { font-size: 24px; } main { background-color: white; } } At wider widths, these enclosed rules are ignored, so the regular layout remains in place. section 13.13
Choose breakpoints by watching the design, not by collecting device sizes. Resize the browser and notice where text becomes hard to read, type looks wrong, or an element lands awkwardly; that breaking point gives you a useful min-width or max-width. section 13.14
A mobile-first layout starts with the simplest useful small-screen design. Media queries then add or modify layout features when wider screens have room, rather than trying to remove desktop features for phones. section 13.15 section 13.19
h1 {
float: left;
font-size: 32px;
}
main {
background-color: #b4a7d6;
}
article {
float: left;
width: 66.67%;
}
aside {
float: left;
width: 33.33%;
}
@media (max-width: 450px) { #1
article {
float: none; #2
width: 100%; #2
}
aside {
float: none; #2
width: 100%; #2
}
h1 {
font-size: 24px; #3
}
main {
background-color: white; #4
}
}
Inspect a complete narrow-screen rule: one max-width condition changes floats, widths, heading size, and background together. section 13.13
Media queries are one part of responsive design alongside relative measurements, flexible grids, and a mobile-first approach. Use them when a layout needs a deliberate change, not merely when flexible elements can wrap on their own. section 13.18 section 13.12
