Responsive Breakpoint Calculator

Calculate responsive breakpoints and generate media queries, SCSS mixins, Tailwind config, and CSS custom properties.

Breakpoints

pxTablet

pxDesktop

pxLarge Desktop

Test Viewport Width

pxActive: lg

Visual Representation

sm640px+ (Tablet)

md768px+ (Tablet)

lg1024px+ (Desktop)

xl1280px+ (Desktop)

2xl1536px+ (Large Desktop)

Viewport1024px

Output

/* sm — Tablet */
@media (min-width: 640px) {
  /* styles */
}

/* md — Tablet */
@media (min-width: 768px) {
  /* styles */
}

/* lg — Desktop */
@media (min-width: 1024px) {
  /* styles */
}

/* xl — Desktop */
@media (min-width: 1280px) {
  /* styles */
}

/* 2xl — Large Desktop */
@media (min-width: 1536px) {
  /* styles */
}