Support increased browser base font size

Summary

The website content is too cramped in the columns if the browser base font size is increased, for example to 36 (as shown in screencast). I believe this is due to the media queries being set in pixels. This means that when the base font size is changed, all the text scales up with it, but the breakpoints still occur at the same pixel width, causing the cramped text.

I think a good solution would be to switch to em units for media queries, which will cause the breakpoints to scale up along with all the text, and be a better user experience for users who use the browser's base font size to increase text size. (See references below)

URL

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Reproduction steps

1. Go to any detail page on MDN
2. Change browser base font size to something greater than 16
3. The bigger the font size, the more the issue of cramped columns of text will be emphasized

Expected behavior

Ideally increasing the base font size would increase the text size, but keep the overall general layout of the website the same, simply scaled up.

Actual behavior

When base font size is increased, for example to 32, the layout remains in the desktop version with 3 columns due to the media query breakpoint being in pixels. But the text scales up with the base font size change, resulting in too-large text in too-narrow columns.

Device

Laptop

Browser

Firefox

Browser version

Stable

Operating system

Windows

Screenshot

https://user-images.githubusercontent.com/37986728/157986335-df384848-9b36-4394-8b6e-4c00b1f95089.mov

Anything else?

There are some articles on the topic of media queries that seem to be referenced often, so I have included them here:

Zell Liew wrote in 2016 that em units should be used due to px and rem units causing browser issues in Safari if the html font-size is changed (e.g. "200%") or zoomed in, and for accessibility reasons. I confirmed that the bugs with px and rem units do still seem to happen with Safari.
https://zellwk.com/blog/media-query-units/

Adam Wathan wrote in 2017 that em units result in buggy behavior in Safari if zooming in. However I and others have confirmed that this bug in Safari no longer exists.
https://adamwathan.me/dont-use-em-for-media-queries/

Additionally, I have some screencasts of a demo showing the behavior on my Twitter:
https://twitter.com/thecodercoder/status/1502131251481829387

With this in mind, I suggest that media queries will operate best for accessibility if em units are used instead of pixels. Please let me know if there's any other information you might need! (Love the new redesign!)

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

Start by reproducing the issue on an MDN detail page with an increased Firefox base font size, then inspect the frontend styles containing the responsive media queries. The work is done when the layout scales with the text without cramped columns, including at the reported larger font sizes.