Grid mess up when using responsive typography

[jacobmohl]

I have played around with using responsive typography (see #17095).

When you add responsive font-size on the body element, the container (of properly other things) gets messed up because of the reliance on ems/rems.
Explained: The grid breakpoint in .container is relative to the font-size, so if you increase the font size on bigger screens, then you also increase the breakpoints.

Is this undesired behavior (bug) or should one manually correct the breakpoints to fit with the different font-sizes based on the same breakpoints 😖 ?

[thomas-lebeau]

I thought so too but in fact em breakpoints are based on a bowser setting (which is default to 16px but can be changed by the user). So the breakpoints value doesn't change according to font size you put in your css.
see: http://blog.w3conversions.com/2015/03/all-your-base-are-belong-to-us-—-or-what-base-size-do-em-based-media-queries-use/

The .container width in the other side do change according to the html font size.

[jacobmohl]

So the reason for the grid not working properly is that max-width is set in rems and not pixels?

[mdo]

that max-width is set in rems and not pixels?

Unless there's a typo or mistake somewhere, all our media queries are currently in ems, not rems.

[mdo]

I believe we'll be moving back to pixels for media queries, so closing this out for now.

[cvrebert]

For posterity: Moved back to pixels in #17403.