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 | Small phone (iPhone SE 2nd gen) |
xs | 30rem | 480px | Standard phone (iPhone 14, Pixel 7) |
sm | 40rem | 640px | Large phone or phone landscape (iPhone 14 Pro Max) |
md | 48rem | 768px | Small tablet (iPad Mini portrait) |
lg | 64rem | 1024px | Tablet landscape or netbook (iPad Air landscape) |
xl | 80rem | 1280px | Everyday laptop (13-inch MacBook Air) |
2xl | 96rem | 1536px | Wide laptop or large monitor (16-inch MacBook Pro) |
3xl | 120rem | 1920px | Full HD desktop display (24-inch 1080p) |
4xl | 160rem | 2560px | Quad HD monitor (27-inch QHD) |
5xl | 240rem | 3840px | Ultra HD display (32-inch 4 K) |
How to Use Breakpoints
In Elevate, breakpoints are applied using the /breakpoint/ syntax in your class list. For example:
<div class="pd:d4 /lg/ pd:d8 /2xl/ pd:d12">Responsive, Organized</div>