Adaptive layout
Adaptive layout is a design strategy that changes a page’s structure, styling, dimensions, or content according to display or device characteristics.
Web Design Playground, Second Edition
An adaptive layout is a page layout that changes its dimensions, arrangement, or visible elements in response to screen or rendering conditions.
- How it is used
- Supports responsive web pages by changing layout, typography, and visible elements to fit different screen sizes.
- How deep it goes
- Defines media queries, shows max-width and min-width rules, and demonstrates grid changes while deferring the full range of media features.
- Examples
- Uses a three-column grid that stacks below 450 pixels and shrinks the title below 350 pixels.
- What you can do after
- Build adaptive pages with CSS media queries that rearrange grids and adjust typography at chosen viewport widths.
Read how Web Design Playground, Second Edition explains adaptive layout →
Web Design Playground
A layout strategy that changes its structure or styling at defined breakpoints to suit different screen sizes.
- How it is used
- Adapts page structure and styling to screen features, especially width, across responsive web pages.
- How deep it goes
- Explains media-query logic, min-width and max-width rules, and mobile-first adjustments, while deferring less common media features.
- Examples
- Uses a narrow-screen h1 rule and a wide-screen aside rule to demonstrate responsive changes.
- What you can do after
- Apply it via CSS media queries to resize, rearrange, hide, or reveal page elements at chosen screen widths.
Related concepts
- media queryuses · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.