Using rem units in media queries and as width

user_1451219 0
Viewed 15901

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?

media-queries css
3 Answers

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

You're not doing anything wrong, this is how rem in media queries are meant to work. As per the spec:

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.

So any styling you apply to the base font size doesn't have an effect on the media query calculation.

Here's the relevant part of the spec.

If you really want to use rem and have them use a font-size basis of 10px, you could always write a SASS mixin to do the conversion for you. Other than that, it might be less confusing to stick with px for media queries.

user_49652160

The size of 1rem in media queries is not affected by changes to the base font size. But you could calculate the correct breakpoint yourselves. You can calculate the breakpoint in pixels based on your new base font size and the desired size in rems.

pixels = desired-rem-value * current-base-font-size

For example for a base font size of 18px and a breakpoint at 20 "rem":

20 * 18px = 360px

There are a few options how to calculate the pixel value:

1. calculate by hand:

html {
  font-size: 18px;
}

/* For a breakpoint at 20 times your base font size*/
@media(min-width: 360px) {
  ...
}

2. Use calc():

@media(min-width: calc(20 * 18px)) {
  ...
}

3. Use a CSS prepocessor function: (For example in scss or something similar.)

$base-font-size: 18px;

html {
  font-size: $base-font-size;
}

@function media-rem($rem) {
  @return $rem * $base-font-size; // $rem must be unitless
}

@media(min-width: media-rem(20)) {
  ...
}
user_26900320
Related