Working with ems based media queries

[Krish1980]

Now that the browser zoom bug is no longer a factor (in fact, I haven’t noticed it for more than 2 years but my colleagues and supervisors keep pointing to
this article

However, the author herself has amended her views, mentioning that that the zooming behavior has long since been made consistent in browsers.
)

1) Is there any point in using ems based media queries if the max-width of the content wrapper is defined in pixels or if the body,html font size is set to pixels?

In my codepen example

I’ve kept the max-width as 65em, keeping in mind that if the browsers’s font setting is set at 16px, the max-width of the wrapper would be 1040px. The break point for a column layout has been defined at 30em, an equivalent of 480px when the browser font is set at 16px.

The reason why I’m bringing this up is this….

In the place where I work, they use a hybrid technique where the max-width is defined in pixels, the base font is set in px (instead of 100%) and media queries and other font sizes are written in ems and rems. Seems pointless to me – if you cannot amend the browser’s default settings, you might as well use pixels since they are easier to work with. Just want to be sure that I am right about this or of I’m missing anything.

2) If I’m right about point one, where the max-width should be defined in ems if we are using ems based media queries and the base font should also be in a relative unit (like %) – do people still change their browsers’s default setting considering that zooming the page would give you an almost exact experience as when the max-with is defined in ems? In fact , while zooming, even the images (which are set in pixels) zoom, preventing the layout from getting distorted whereas it doesn’t when the browsers’s default setting is changed, thereby hampering the layout.

[Krish1980]

I think I’m on to something because The Bootstrap team, for V4 has “Reverted media queries and grid containers from rems to pixels as viewports are not affected by font-size. “

[Author]

Posts