Write one breakpoint per line as a name and a width, and the matching @media blocks come out in order. A comma, a tab or a space can separate the two, and a px suffix on the width is fine. Entries are sorted from the narrowest width up, so the order you type them in does not matter.
Mobile first uses only min-width and layers conditions on top of the base styles; desktop first uses max-width to override narrow screens. Range mode pairs min-width with max-width so each block owns exactly one band. On the max-width side the overlap guard you enter is subtracted, because viewport widths can be fractional. The syntax follows W3C CSS Media Queries Level 4 (as of October 2026).
This tool writes only the block skeletons; the declarations inside are yours to fill in. It does not produce clamp() formulas, container queries, or height, orientation and resolution conditions. Comment-closing characters in a name are stripped so the output cannot break. Device spec lists change often, so widths you measured on your own layout are the safer input.
Frequently asked questions
Viewport widths can be fractional, so max-width 768px and min-width 768px can both match at once. Subtracting a tiny amount keeps the two blocks from overlapping.
There is no fixed answer. Measuring the widths where your own layout actually breaks is steadier than following a device list.
No. clamp() output is not supported here; this tool only writes @media blocks. Fluid type scaling is handled by a separate tool.