Breakpoints
Elevate CSS comes with a set of thoughtfully designed default breakpoints to simplify responsive design. These breakpoints cover a wide range of devices, ensuring seamless adaptability across screens of all sizes.
Breakpoints Overview
The following table outlines the default breakpoints provided by Elevate CSS, along with their corresponding pixel and rem values:
| Breakpoint | Key | Min Width | Description |
|---|---|---|---|
2xs | 20rem | 320px | Very Small Mobile |
xs | 30rem | 480px | Small Mobile |
sm | 40rem | 640px | Large Mobile |
md | 48rem | 768px | Tablet |
lg | 64rem | 1024px | Small Desktop |
xl | 80rem | 1280px | Medium Desktop |
2xl | 96rem | 1536px | Large Desktop |
3xl | 120rem | 1920px | Full HD |
4xl | 160rem | 2560px | 2K |
5xl | 240rem | 3840px | 4K |
How to Use Breakpoints
In Elevate, breakpoints are applied using the /breakpoint/ syntax in utility strings.