[theme] Improve the breakpoints values

[mwskwong]

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 values were updated in https://material.io/blog/material-design-for-large-screens, the new values: https://material.io/design/layout/responsive-layout-grid.html#breakpoints

[oliviertassinari]

@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

• Material-UI
  • xs: 0
  • sm: 600
  • md: 960
  • lg: 1280
  • xl: 1920
• Bootstrap
  • xs: 0
  • sm: 576
  • md: 768
  • lg: 992
  • xl: 1200
  • xxl: 1400
• TailwindCSS
  • xs: 0
  • sm: 640
  • md: 768
  • lg: 1024
  • xl: 1280
  • 2xl: 1536
• StackOverflow
  • xs: 0
  • sm: 640
  • md: 980
  • lg: 1264
• GitHub
  • xs: 0
  • sm: 544
  • md: 768
  • lg: 1012
  • xlg: 1280
• Chakra
  • xs: 0
  • sm: 480
  • md: 768
  • lg: 992
  • xl: 1280

Device resolution benchmark

I 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 proposal

I think that we should aim for matching regular devices sizes:

• xs: 0. match-all, especially phones
• sm: 600, most phones seem to be below this value. We start to match tablets.
• md: 900 most tablets seem to be below this value. We start to match small laptops.
• lg: 1200 most laptops seem to be below this value: We start to match large screens. I have a 13,3" MacBook Pro 1280px.
• xl: 1500 We start to match extra-large screens. A 21" screen is 1680px, a 24" screen is 1920px. It rarely makes sense to have a layout wider than this. It would match the second medium window range of MD.

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.

[mwskwong]

It might also be a good idea to take orientations into consideration. One example will be dynamically loading fullscreen backgrounds.

[oliviertassinari]

How would you take the orientation into account?

[chrisVillanueva]

Good afternoon.

Any progress on this issue? Has the team decided which breakpoints to support?

Thanks!

[oliviertassinari]

@chrisVillanueva So far, we are going with "First proposal".

[siriwatknp]

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
xs: 0 - 600 (same as v4)
sm: 600 - 960 (same as v4)
md: 960 - 1280 (same as v4)
lg: 1280 - 1536 (changed)
xl: > 1536 (changed)

This should affect only projects that support extra large screen.

1536 is divided by 12 and tailwindcss is using it.

[oliviertassinari]

@siriwatknp Thoughts:

• I think that going from 1920 to a lower value is a definitive win 👍

• Material Design has recently updated its guidelines for breakpoints. They simplified them: https://material.io/design/layout/responsive-layout-grid.html#breakpoints.

  • xs: 0 // phones
  • sm: 600 // tablets 1
  • md: 905 // tablets 2
  • lg: 1240 // laptops
  • xl: 1440 // desktops

• we have been moving toward considering the breakpoints as a value, and never as a range (BC already done in v5).

• We have implemented the rebranding with the value of the first proposal as a mean to stress test them.

https://github.com/mui-org/material-ui/blob/9acf8be6d2fd08210665c294830df3c85c014214/docs/src/modules/branding/BrandingRoot.tsx#L104-L112

[siriwatknp]

• We have implemented the rebranding with the value of the first proposal as a mean to stress test them.

Okay, let's move forward with proposal 1 (but with xl: 1536). will open a PR soon.