CSS breakpoints for responsive web design
A breakpoint is a condition at which CSS changes a layout. In responsive design it is often a viewport width threshold, such as the point where one column becomes two.
How do media queries use the viewport?
A min-width condition compares the viewport width with a threshold. Within an iframe it uses the frame viewport, not the width of the entire FlexViewport page. Preview zoom does not change that width.
Is there a universal set of breakpoints?
No single set fits every design. Choose a boundary when the content needs a layout change: a heading breaks the grid, navigation no longer fits or columns become too narrow. Popular device sizes are useful samples, not mandatory CSS thresholds.
How does mobile-first work?
Start with a basic single-column layout for a narrow viewport. Add columns and spacing through min-width rules as space becomes available. The 768px value below is an example for this grid, not a standard for all tablets.
.cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}How can I test the boundary?
For this example, compare custom viewports at 767, 768 and 769 CSS px. Check long text, buttons and horizontal overflow. Then inspect narrower and wider presets: passing one boundary test does not cover the full range.
How is a preset different from a breakpoint?
A preset is a specific width and height used to preview a page. A breakpoint is a condition in the website CSS. One preset can activate several media queries, and another untested boundary may sit between two neighboring presets.
More about CSS: MDN — Viewport concepts · MDN — Media queries