Using rem units in media queries and as width

Question

When using rem units in Google Chrome (or firefox), the result is unexpected. I\'v set up a page with the root font-size set to 10px to make it easier the translate a pixel

Answer 1

It's meant to work like this, it's just a little confusing if you don't know what's going on.

If you're not using rem in media query declarations then they are based off the root html base font size. If you don't declare this, then in most modern web browsers it's 16px.

As you have declared it as 10px a rem will be 10px throughout your code. Unlike em units, where it is based on the closest parent declaration size.

The confusion comes in that media queries declarations do not base themselves on the declared font-size that you apply to html and instead always use the default size - which as I said is 16px in pretty much all browsers.

That's why 50rem is coming out as 800px - 16px * 50.

Note, this is only for the declaration of the media query breakpoint, if you assign something to be 1rem tall inside the media query, then it will base itself on the base html size.

html {
  font-size: 10px;
}

@media screen and (min-width: 50rem){ // 800px (uses base font-size)
  div.somediv {
    width: 50rem; // 500px (uses the declared html font-size)
  }
}