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 based design to html/css.

This is my css. My expectation would be a page with one 500px wide box and if the screen is wider than 500px the background should turn red.

html {
font-size: 10px;
}

@media screen and (min-width: 50rem){
  body{
    background-color: red;
  }
}

.test{
  width: 50rem;
  background: black;
  height:100px;
}

But, despite both values being defined as 50rem, the results is a 500px wide box with the page turning red at 800px.

https://jsfiddle.net/tstruyf/puqpwpfj/4/

What am I doing wrong or why is this?

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)
  }
}