An adaptive layout changes its styling or structure when the screen matches a condition. Think of it like a room that rearranges its furniture: a narrow phone keeps the page simple, while a wider screen can reveal more. section 13.12
Build one in small steps:
- Start with a mobile-first layout, usually keeping elements stacked and easy to read on a phone. section 13.19
- Choose a screen feature to test, most often viewport width. section 13.12
- Write a media query: its expression asks a question, and its code block supplies styles when the answer is true. section 13.12
- Use max-width for smaller screens and min-width for screens at least as wide as a chosen value. section 13.12
- Add layout changes for larger screens, such as showing an aside or allowing elements to wrap with flexible layout techniques. section 13.19
@media (expression) {
selector {
declarations
}
etc.
}
Use this pattern as the basic shape of a CSS media query: test an expression, then apply declarations to matching elements. section 13.12
A page that makes room
Keep the page title comfortable on very narrow screens: @media (max-width: 350px) { h1 { font-size: 24px; } } On a wide screen, reveal the aside: @media (min-width: 1024px) { aside { display: inline-block; } } Between those conditions, the browser simply uses the base layout. section 13.12
Try resizing a page and watch which rules switch on. Then add one gentle change for a wider screen—perhaps a new column, more breathing room, or a visible aside. section 13.19
