Responsive Breakpoint Planner
Plan responsive design breakpoints for all devices.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Decide where your layout should change
A responsive design changes layout at breakpoints, the screen widths where a layout that works on a phone would look wrong on a desktop. This planner helps you choose sensible breakpoints across the range of devices your visitors use, so your CSS adapts at the right widths rather than at arbitrary ones copied from a framework you may not fully use. The result is a considered set of widths rather than a guess.
Content, not devices, should set breakpoints
The common mistake is picking breakpoints to match specific phones and laptops, which is a moving target as new devices appear every year. The better approach is to add a breakpoint wherever the content itself starts to look bad as the screen widens or narrows, letting the design dictate the widths. Planning them deliberately gives you a small set of meaningful breakpoints rather than a scattered pile of device-specific ones that are impossible to maintain.
A plan you can build from
It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is a breakpoint?
A screen width at which your layout changes, so a design suited to a narrow phone becomes one suited to a wide desktop. CSS media queries apply different styles at each breakpoint.
How many breakpoints do I need?
Usually a small number. Add one wherever the content starts to look wrong as the screen widens, rather than trying to match every device size that exists.
Should breakpoints match specific devices?
No. Device sizes multiply endlessly. Base breakpoints on where your content needs to change, which is stable, rather than on the dimensions of particular phones.
What is mobile-first?
Designing for the narrow screen first and adding styles at larger breakpoints. It tends to produce simpler, more robust CSS than starting wide and cutting down.
Is my plan uploaded?
No. The planning runs entirely in your browser.
Privacy & Security
Planning done locally.
About This Tool
This tool runs entirely in your browser. No data is sent to any server, ensuring complete privacy. Simply use the interface above to get started — no registration or login required.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.