Skip to main content

Breakpoint Set Helper

v1.0.0

Derive breakpoints from common devices — modern phones, tablets, desktops, ultrawide.

Breakpoint CSS Variables
:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* Usage: */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

/* CSS Container queries: */
@container (min-width: 640px) { /* sm */ }
@container (min-width: 768px) { /* md */ }
@container (min-width: 1024px) { /* lg */ }
@container (min-width: 1280px) { /* xl */ }
@container (min-width: 1536px) { /* 2xl */ }