Responsive Breakpoint Generator
Set a root font size and get device breakpoints as rem media queries.
Media query rem values follow the browser default of 16px, so every width is divided by 16.
| Width | Media query value | Typical device |
|---|
What this tool does
A responsive breakpoint generator converts common device widths into media queries written in rem. Pick the root font size for your page, choose min-width for a mobile-first sheet or max-width for desktop-first, and each width from 320 to 1920 pixels is divided by 16 into its rem value - 768 pixels becomes 48rem. An optional fluid clamp() type scale is generated alongside, running from the root size at the smallest width up to one and a half times it at the largest, so type can grow smoothly instead of jumping at each breakpoint.
Turns the common device widths from 320 to 1920 pixels into ready-to-paste rem media queries.
Takes a custom root font size and divides every width by 16 for the media query value.
Adds an optional fluid clamp() type scale that runs from the root size up to one and a half times it.
Copies the whole block - root rule, breakpoints and fluid scale - in one click.
How to use it
- Set the root font size for your html rule - 16 pixels is the default.
- Choose min-width for mobile-first or max-width for desktop-first.
- Leave the fluid clamp() scale on if you want type that grows with the viewport.
- Read the table: each width, its rem value and the device it usually covers.
- Copy the CSS and paste it into your stylesheet.
Why use this tool
Breakpoints written in pixels fight the reader: someone who has enlarged their browser default gets a layout sized for someone else's screen. Rem breakpoints follow the root font size instead, so the layout honours the setting the reader already made, and the same rule stays correct if your own root size ever changes. The conversion itself is trivial - divide by sixteen - which is exactly why it is worth having generated rather than retyped nine times and checked by eye.
Why we built it
We built this responsive breakpoint generator because the numbers are always the same nine and the arithmetic is always divide by sixteen, yet every stylesheet still carries a hand-typed set that drifts - one width at 767 where the rest say 768, one division done by eighteen. Emitting the whole set from one root font value keeps the sheet internally consistent, and adding the fluid clamp() alongside means the space between breakpoints is handled too. The CSS Flexbox Generator and CSS Grid Generator build the layouts these queries then switch between.
For the pixel and rem conversion on its own, the PX to REM converter handles single values, and the CSS Animation Generator writes the motion that runs inside them.
Who this tool is for
- Front-end developers starting a stylesheet with a clean breakpoint block
- Designers moving a pixel-based spec onto a rem-based system
- Students learning how rem media queries are derived
- Anyone auditing a stylesheet for hand-typed breakpoint errors
The breakpoint set
| Width | rem (px / 16) | Typical device |
|---|---|---|
| 320 px | 20rem | Small phone |
| 360 px | 22.5rem | Phone |
| 480 px | 30rem | Large phone |
| 600 px | 37.5rem | Phablet |
| 768 px | 48rem | Tablet portrait |
| 1024 px | 64rem | Tablet landscape |
| 1280 px | 80rem | Laptop |
| 1536 px | 96rem | Small desktop |
| 1920 px | 120rem | Full HD desktop |
A worked example
Load the sample values: a 16 pixel root, min-width queries and the fluid scale switched on. The summary and output read like this:
| Setting | Value |
|---|---|
| Root font size | 16 px |
| Fluid type scale | clamp(1rem, 0.9rem + 0.5vw, 1.5rem) |
| 320 px breakpoint | 20rem (min-width) |
| 768 px breakpoint | 48rem (min-width) |
| 1920 px breakpoint | 120rem (min-width) |
| Breakpoints emitted | 9 |
What you enter, and what you get back
| Item | Details |
|---|---|
| Root font size | Pixels, used for the html rule and the fluid scale. |
| Direction | min-width for mobile-first, max-width for desktop-first. |
| Fluid scale | Optional clamp() rule from the root size up to one and a half times it. |
| Result | One CSS block: root rule, nine media queries with device comments, fluid scale. |
Media query rem values follow the browser default of 16 pixels, so widths are divided by 16 rather than by your own root size. Changing the root affects the html rule and the fluid scale.
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| A query looks wrong for your root size | The root font input was changed expecting it to alter the queries. | Media queries divide by 16 by design - only the html rule and clamp use your root. |
| The fluid scale is clipped | The viewport sits at or beyond the largest breakpoint. | That is expected: the clamp holds its maximum from 1920 pixels upward. |
| Styles do not apply where you expect | min-width and max-width were mixed in one sheet. | Pick one direction for the whole block and stick to it. |
| Nothing changes when the window resizes | The rules were pasted but are empty. | Each query ships with a comment inside it - put the styles below the comment. |
| Type grows in browsers but not in print | Print media uses its own root and margins. | Handle print rules in a separate @media print block. |
Assumptions and limitations
- The nine widths are a fixed preset - narrower or wider custom widths need editing by hand.
- Media queries divide by 16, following the browser default root, not your custom root font size.
- The fluid clamp scales one value between 320 and 1920 pixels; beyond both it holds the endpoints.
- Generated rules are intentionally empty apart from a comment - the styles remain yours to paste in.
Frequently asked questions
How do I convert pixels to rem for breakpoints?
Divide the width by 16 - 768 pixels becomes 48rem, 1280 becomes 80rem. The tool does that for all nine preset widths and prints them as media queries.
Should breakpoints be min-width or max-width?
min-width suits mobile-first sheets, where each rule adds behaviour as the screen grows. max-width suits desktop-first work, where rules strip behaviour as the screen shrinks. Pick one direction for the whole block.
What does the root font size change?
It writes the html font-size rule and drives the fluid clamp() scale. Media query rem values stay divided by 16, because that is the browser default a media query is measured against.
What is the fluid clamp() scale for?
It lets type grow smoothly between your smallest and largest widths instead of jumping at each breakpoint - one rule from the root size up to one and a half times it, with the minimum and maximum as guards.
Can I copy the whole block at once?
Yes. Copy CSS returns the root rule, all nine commented media queries and the fluid scale together, ready to paste into a stylesheet.
Is the responsive breakpoint generator free?
Yes, completely free with no account and nothing uploaded. The CSS is built in your browser and is gone when you close the tab.