Bootstrap: em vs px media queries

[febLey]

I looked at the bootstrap v4 source and was wondering why you are using px-based media queries, so I dug trough some issues and pull request. So I know that there has been a lot of discussion about this delicate topic (https://github.com/twbs/bootstrap/pull/17403, https://github.com/twbs/bootstrap/issues/17070), but I'd like to revisit the decision of the team.

Like some people mentioned in one the referenced issues the big benefit of em based media queries is that the layout adapts if the user has changed the base font-size, so that the content is presented in a fitting way.

I think there should be at least an variable to switch between em and px-based media queries.

[mdo]

We'll be sticking with pixels given the previous discussions.

I think there should be at least an variable to switch between em and px-based media queries.

Perhaps in the future, but for now I think we should stick with what we have and get something stable in place first :grin:

[jasongilmour]

I'd go as far as suggesting that we should default to EM based media queries based on this article: https://zellwk.com/blog/media-query-units/

I'd be happy to put together a pull request with this change, or adding a variable that sets the unit for breakpoints if it was wanted.

[new-mikha]

To add to @jasongilmour 's point right above, here is how the stock Bootstrap 4 example from the Bootstrap docs is looking like when the Font Size is set to Very Large in Chrome:

That's the very first sample from here:
https://getbootstrap.com/docs/4.1/components/navbar/#nav

I don't think it's right :-/