Should breakpoints match device widths?

Not strictly. Pick breakpoints where your content layout breaks; device-based numbers are just a starting reference.

min-width or max-width?

Prefer min-width (mobile-first) so styles are additive. Mixing both is fine if you mind the overlap at the exact boundary value.

Is responsive breakpoint calculator free to use?

Yes. UnitCraft calculators are free and run entirely in your browser.

Does UnitCraft send my input values to a server?

No. Calculator inputs are processed locally in the browser tab.

Can I copy the generated CSS output?

Yes. Each tool provides copy-ready snippets so you can paste values directly into code.

Utility · CSS unit tool

Responsive breakpoint calculator

Turn device presets (mobile, tablet, desktop) into `min-width` and `max-width` media-query snippets so your breakpoints in design and code never drift apart.

Min-width (px)

css

@media (min-width: 768px) {
  /* … */
}

Keyboard tip: press Tab or Shift+Tab to switch fields.

Min-width first

A mobile-first strategy writes base styles for small screens and layers enhancements with `min-width` queries as the viewport grows. This keeps CSS additive and avoids overrides fighting each other.

Common min-width stops are roughly 640px (sm), 768px (md), 1024px (lg), and 1280px (xl)—but choose breakpoints where *your* content breaks, not arbitrary device sizes.

Avoiding range gaps

If you mix min and max queries, watch the boundary: `max-width: 768px` and `min-width: 768px` both match at exactly 768px. Offset one by 0.02px or commit to a single direction.

Prefer ranges driven by content (where a layout actually starts to look cramped) over chasing the spec sheet of this year's phones.

Copy-ready examples

Mobile-first stops

css

/* base = mobile */
@media (min-width: 768px) { /* tablet+ */ }
@media (min-width: 1024px) { /* desktop+ */ }

Frequently asked questions

Should breakpoints match device widths?: Not strictly. Pick breakpoints where your content layout breaks; device-based numbers are just a starting reference.
min-width or max-width?: Prefer min-width (mobile-first) so styles are additive. Mixing both is fine if you mind the overlap at the exact boundary value.
Is responsive breakpoint calculator free to use?: Yes. UnitCraft calculators are free and run entirely in your browser.
Does UnitCraft send my input values to a server?: No. Calculator inputs are processed locally in the browser tab.
Can I copy the generated CSS output?: Yes. Each tool provides copy-ready snippets so you can paste values directly into code.