-
-
Notifications
You must be signed in to change notification settings - Fork 32k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[theme] Improve the breakpoints values #21902
Comments
@matthewkwong2 Thanks for raising this issue, I have been keen to look into how we can improve the breakpoint values to better match the requirements of today's devices. IMHO we should partially ignore the recommendation of Material Design and look at what most teams use in their application/website, it will allow us to pick better values (crowd wisdom). Design system benchmark
Device resolution benchmarkI figure the easiest would be to look at what Framer have, as I imagine they have spent quite some time thinking about what screen to optimize the design for: First proposalI think that we should aim for matching regular devices sizes:
Note that the proposed breakpoints are designed to be divisible by 8 with a 0 rest (default grid is 4px) and to be divisible by 12 for the grid to have absolute values. breakpoints: {
values: {
xs: 0, // phone
sm: 600, // tablets
md: 900, // small laptop
lg: 1200, // desktop
xl: 1500, // large screens
},
}, More broadly, It would be great to hear change proposals from the community, especially around the why. |
It might also be a good idea to take orientations into consideration. One example will be dynamically loading fullscreen backgrounds. |
How would you take the orientation into account? |
We should be able to use the same breakpoints as in mui#21902 (comment) If we can't there is something wrong with them. We need to know.
Good afternoon. Any progress on this issue? Has the team decided which breakpoints to support? Thanks! |
@chrisVillanueva So far, we are going with "First proposal". |
I propose the second option. The main reason is to not introduce high impact because it is a breaking change (if we do it for v5). I assume that most of the project implement responsive from xs-lg. I propose that the change only affect lg-xl like this This should affect only projects that support extra large screen.
|
@siriwatknp Thoughts:
|
Okay, let's move forward with proposal 1 (but with |
According to the official https://material.io/design/layout/responsive-layout-grid.html#breakpoints, the breakpoints should be as follow:
xs: 0 - 600
sm: 600 - 1024
md: 1024 - 1440
lg: 1440 - 1920
xl: > 1920
Yet currently, MUI has the following as default
xs: 0 - 600
sm: 600 - 960
md: 960 - 1280
lg: 1280 - 1920
xl: > 1920
Edit:
The text was updated successfully, but these errors were encountered: