Skip to content
Calculator Tools
Web Development Calculators

Responsive Breakpoint Calculator

Media query breakpoints in px, em and rem, with the devices each range covers.

Enter values

Results update as you type.

Result

Media query

@media (min-width: 48em) { … }

In pixels
@media (min-width: 768px)
In em
48 em
In rem
48 rem
Targets
Tablets
Why em?
Em breakpoints respond to the reader’s browser zoom and font-size setting; pixel ones do not

Common breakpoints

NamePixelsem
Small64040
Medium76848
Large1,02464
Extra large1,28080
2XL1,53696

About the Responsive Breakpoint Calculator

Media query breakpoints in px, em and rem, with the devices each range covers.

Also known as: media query calculator, breakpoint converter, px to em media query, responsive design breakpoints.

How to use this calculator

  1. Enter breakpoint, root font size, approach.
  2. The result updates instantly as you type — press Calculate (or Enter) at any time.
  3. Review the breakdown shown under the main result.
  4. Use Copy result or Share to save the answer or send a link with your inputs.

Formula

em breakpoint = pixel breakpoint ÷ root font size

Worked example

Using the values pre-filled in the calculator above:

  • Breakpoint = 768 px
  • Root font size = 16 px
  • Approach: Mobile first (min-width)

the calculator returns:

  • Media query: @media (min-width: 48em) { … }
  • In pixels: @media (min-width: 768px)
  • In em: 48 em
  • In rem: 48 rem