Breakpoints give hooks for components and layouts to adapt and change in relation to the window size of the users device.
We use a mobile first approach to breakpoints, that means we use the
min-width property for our media queries. This technique is used for applying basic layout styles first and then using breakpoints to adjust for wider screens.
|0||480px||Smaller screens like phones|
|1||768px||Medium sized screens like tablets|
|2||1024px||Large screens like laptops|
|3||1200px||Larger screens like a desktop monitor|
There are a few ways to use the breakpoints, for simpler responsive behaviors you can use them as an array of values inline like
Another option if you are writing more complex responsive behaviors you can access the breakpoints from the theme and use them a styled block
const ResponsiveBox = styled(Box)``