I'm working on a side project as a UX / UI Designer (first time), and I want to optimize my work for the hand off to the developers.
I'm trying to understand the differences between the CSS breakpoints in the Material UI documentation and the ones used in Material Design 3.
MUI documents the following breakpoints (https://mui.com/material-ui/customization/breakpoints/):
- xs, extra-small: 0px
- sm, small: 600px
- md, medium: 900px
- lg, large: 1200px
- xl, extra-large: 1536px
Material 3 Design kit (https://www.figma.com/community/file/1035203688168086460/Material-3-Design-Kit), the layout breakpoints are defined as:
- XS : 0 - 599 dp
- S : 600 - 904 dp
- M(1) : 905 - 1239 dp
- M(2) : 1240 - 1439 dp
- L : 1440 + dp
Do you have any idea why there are differences? Which mode should I use to make the best developer's handoff?
Thanks a lot!