The post suggests that using rem units for breakpoints would make it easier for websites to adapt to users who modify their default browser font size. Community members discuss the benefits and drawbacks of using rem vs em units, with some noting that rem is often misused and that CSS variables may be a better solution in the future.
It would be nice if the breakpoints could be set in rem units. This would make it easier for the site to adapt to users who modified their default browser font size.
E.g. When the browser base font size is 16px and I'm on a 13" laptop, a 3-column layout of text elements might look great. But when my browser base font size is scaled to 48px, on the same screen, a 3-column layout would be very difficult to read, with only 1 or 2 words per line. Switching to the tablet (or mobile) breakpoint in this case (thanks to setting the breakpoints in rem units) and showing a 2- or 1-column layout would be more appropriate.
This would make it easier for us developers to accommodate users with poor vision who use a large base font size in their browser.
Out of curiosity, I looked into common frameworks and what units they use. Many (tailwind, bootstrap, material UI) all use px as default. Zurb's Foundation uses em.
When using em, you base the sizing on the user's default browser settings vs rem, where you define exactly what they see. There are benefits to each method.
Allowing for the designer to choose which media query element would be a cool feature.