Media queries PX vs EM vs REM

Question

Can anyone explain why my media queries break when converting them FROM px TO ems

In the body of my document, I have included the following rule font-size: 62.5%, Therefore I would assume that I could convert my media query to FROM 650px to 65em? Changing my media queries to ems breaks the layout

As an alternative, can I convert the media query to REMS with a pixel fallback ?? that said, I have no idea how to do this

@media screen and (min-width: 650px) {     
  body {
    font-size: 62%;
    background-color: #364759;
    background-repeat: repeat-x;
    background: url("bg.gif");
  }
    
  #wrapper, footer {
    width: 80%;
    max-width: 1050px;
    margin: 0 auto;
  }
} // end media query

many thanks, P

The problem is that media queries don't get their 'base-size' from the body, but rather the UA or user pref setting. Changing the body font-size has no impact on media query base font-size. — Jesse Kernaghan, Apr 16 '15 at 21:17

score 31 · Answer 1 · answered Apr 18 '15 at 21:43

Section 1.3 of the media queries spec says:

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

Similarly, the section 2 says:

Unless another feature explicitly specifies that it affects the resolution of Media Queries, it is never necessary to apply a style sheet in order to evaluate expressions.

So your font-size: 62.5% rule has no effect with regards to media queries, and 1em is still 16px, not 10px.

The reason things are this way is that doing otherwise would cause loops, which is something CSS cannot deal with. Try to think of what this example would do if we didn't have this rule:

body { font-size: 10000px; }
@media (min-width: 1em) {
  body { font-size: 1px; }
}

1em would be gigantic, so the media query would match, so 1em would be small, so the media query wouldn't match, so 1em would be gigantic, so...

I thought about this earlier today and just thought: *they probably have a rule for that* - I find the answer to that 6 hours later, thanks! — SidOfc, Dec 17 '15 at 15:32

Justin Ober · Answer 2 · 2015-04-16T22:12:15.587

Here is a great article that will help explain the differences between px/em/rem

https://www.futurehosting.com/blog/web-design-basics-rem-vs-em-vs-px-sizing-elements-in-css/

Also this may be useful: https://css-tricks.com/rems-ems/

EDIT

As @Jesse Kernaghan commented that the above links could be broken easily I will outline. The differences between PX vs EM vs REM.

px

A pixel is an absolute measurement, which means that they are the same size regardless of the size of anything else. In practice, they are not the same length everywhere because specific devices treat them differently, however on each device a pixel is always the same. 16px on your laptop monitor is not the same as 16px on your iPad. Pixels are absolute but not consistent.

em

Where px is an absolute measure of length em's are relative to the font-size of the parent element. Take the following example:

div{ font-size: 22px; }
p{ width: 200em; margin: 3em; font-size: 0.8em;}

<div>
    <p>Some text</p>
</div>

Now if you wanted to half the size of the p element you would just need to change the font-size of the surrounding <div> to 11px.

This unit of measure can be very useful as it pertain's to responsive layouts.

However, there are problems with em's. Because everything is sized relative to it parent, the meaning of an em changes as elements are nested. If you take the above example and expand on it and nest a <blockquote> inside the <p> with a font-size of 0.5em, the result will probably not be what is expected. The result will be that the font-size of the <p> will be equal to 11px however the font-size of the <blockquote> will be half of that again, because em is relative to the immediate ancestor (<p>), not the <div>.

rem

Rems (root ems), are like em's but they are always relative to the font-size of the <html> element. It does not matter how deeply nested an element is.

Conclusion

So with a brief explanation out of the way there is a basic concept that Chris Coyier has in his post https://css-tricks.com/rems-ems/. It basically outlines to set a base html font-size and then do media query adjustments using px (remember this is an absolute measurement). And inside these media query resize all you do is scale the font-size down. Then you set your main elements using the rem and the elements that need to scale with the main elements use the em. Chris Coyier code example is below:

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
  font-size: 1.5rem;
}
.footer {
  font-size: 0.75rem;
}
.sidebar {
  font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

Thanks guys some useful tips , but I'm still confused how to convert these px media queries. I used a sublime package to convert the px to rems (from observation this simply works by dividing px / 16) and this DID work! this was very strange because my base font is set to 62.5 so I have no idea how the REM conversion did not break the layout... — stckpete, Apr 16 '15 at 21:31
@stckpete If go to your browser settings and change your font-size to 18 instead of 16, your calculations are now completely wrong again. That is the danger of trying to set 'base font size' instead of using the browser's pre-defined values. You ultimately don't have any control of what that media query will use as it's base. — Jesse Kernaghan, Apr 16 '15 at 21:53
I think Justin Ober's example code based on Chris Coyier's article using rem's is good advice. I would like to point out, however that any time em's are used the web designer needs to keep in mind that they will cascade, whereas rem's do not. Rem's always refer back to the root element which is the html element. — Michael Moriarty, Aug 27 '16 at 04:19

score 3 · Answer 3 · answered Oct 10 '15 at 23:19

In addition to the other answers, please note that a length specified in em for another property than font-size is actually relative to the font-size of the element itself, i.e. not necessarily its parent. This makes a difference if you specify a padding, margin etc in em and also a font-size for one and the same element.

Media queries PX vs EM vs REM

3 Answers3

Linked

Related