Built-in breakpoints allow you to easily build adaptive layouts.
Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.
| Size | Width |
|---|---|
initial Phones (portrait) | 0px |
xs Phones (landscape) | 520px |
sm Tablets (portrait) | 768px |
md Tablets (landscape) | 1024px |
lg Laptops | 1280px |
xl Desktops | 1640px |
Most component size and layout props will accept an additional Responsive object shape for modifying the given prop across breakpoints.
Each size maps to a corresponding key, the value of each will be applied when the screen size is greater than or equal to the named breakpoint.
<Heading
size={{
initial: "3",
md: "5",
xl: "7",
}}
/>