Skip to main content

Responsive

  • Breakpoints
  • Breakpoint Range

Breakpoints​

  • apply at breakpoint and larger
prefix	Minimum width	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

example:
md:flex				//display:flex; on medium screens and larger
sm:text-center			//center text on screens 640px and wider, not on small screens
text-center sm:text-left	//center text on mobile, and left align it on screens 640px and wider

Breakpoint Range​

  • apply at a certain breakpoint range only
Variant	Media query
max-sm	@media (width < 40rem) { ... }
max-md	@media (width < 48rem) { ... }
max-lg	@media (width < 64rem) { ... }
max-xl	@media (width < 80rem) { ... }
max-2xl	@media (width < 96rem) { ... }

example:
md:max-lg:flex		//apply only at width between 48rem to 64rem