Breakpoint
A responsive-design breakpoint is a viewport, container, or screen-size threshold at which an interface changes its layout or styling rules.
CSS in Depth, Second Edition
A responsive-design breakpoint is a viewport or container condition at which styles switch between predefined layout or presentation configurations.
- How it is used
- Uses breakpoints to change a responsive page’s spacing, navigation, and columns as browser width increases.
- How deep it goes
- Works through mobile-first min-width rules, layout changes, breakpoint choice, and unit trade-offs without specifying a universal set of widths.
- Examples
- Shows a title resizing at 560 px and a three-column grid appearing at 650 px.
- What you can do after
- Build it from scratch by layering media queries over mobile styles and choosing widths where specific layouts become cramped.
Web Design Playground, Second Edition
A breakpoint is a width or other threshold at which a responsive design changes its layout or styling.
- How it is used
- Uses width thresholds to adapt page layout and styling as available screen space changes.
- How deep it goes
- Explains media-query implementation and content-driven selection, but stops short of cataloging device-specific widths.
- Examples
- Shows a 450px grid collapse, a smaller heading, and a 1,024px rule that reveals an aside.
- What you can do after
- Apply it via CSS media queries to build layouts that respond to content and available width.
Read how Web Design Playground, Second Edition explains breakpoint →
Related concepts
- responsive web designused by · Responsive web design is an approach to designing websites whose layouts and presentation adapt to different screen sizes, viewports, and device characteristics.
- media queryused by · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
- layoutconfigures · A D3 layout is a preprocessing function that transforms a dataset into an annotated dataset containing attributes needed to draw a visualization.
- emuses · The em is a CSS relative length unit whose computed value is based on the applicable font size.
- fluid layoutcontrasts with · A fluid layout is a web layout whose dimensions adapt continuously to changes in available viewport space.
- viewportequivalent to · A viewport is the visible region through which a browser or graphical interface displays a document or content.
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.