Using Rem Units in Media Queries and as Width

rem of media queries vs rem of anything else

From the same specification:

When used outside the context of an element (such as in media queries), these units refer to the computed font metrics corresponding to the initial values of the font property.

So 50rem is simply 50*16px = 800px

:root {
  box-sizing: border-box;
  margin: 0;
  font-size: 0.5rem;
}
.shape {
  content: "";
  display: block;
  background-color: red;
  border-radius: 100%;
  width: 50rem;
  height: 10rem;
}

@media (min-width: 50rem) {
  .shape {
    background-color: blue;
  }  
  :root {
    font-size: 2rem;
  }
}
@media (min-width: 800px) {
  .shape {
    outline:10px solid green;
  }
}

<div class="shape">
</div>

Media queries with rem units in Chrome?

The spec says this about relative units such as both rem and em:

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’.

(The initial value of font-size is medium, which is usually equal to the default font size setting in the browser's user preferences.)

Since Media Queries 3 doesn't define special rules for any specific units besides the above quote on relative units, rem should act like em, working off the initial value of font-size. If it doesn't work in Chrome, it's most likely a bug.

Are REM units unusable with media queries? How to update root font-size?

Rem units are based off the font size of the html element, not the body.

Your css would change to this:

html { // changed from body to html
    font-size: 14px;
}

div {
    margin: 10px;
    padding: 20px;
    text-align: center;
    background: #efefef;
}

#em h1 { font-size: 2em; }
#em p { font-size: 1em; }

#rem h1 { font-size: 2rem; }
#rem p { font-size: 1rem; }

@media screen and (max-width: 500px) {
  html { // changed from body to html
    font-size: 6px;
    background: red;
  }
}

Notice we target the html element in the first line and in the media query.

Here is your jsfiddle modified to work with rems.

Confusion about ems in media queries

In normal situations, 1em is a relative unit, and in a font-size it's relative to the font-size of its parent element. medium is an absolute unit. In different browsers it can be set to different pixel sizes, and is chosen to be comfortable to read on a device. A common value for medium is 16px, but other values could be chosen. For example, a user might configure their browser to use a different px value for medium so that they can read the text better.

In media queries, there is no parent element for 1em to be relative to. So it takes the initial value of medium.

So yes, the two sources are saying the same thing, the spec with just a little more precision.

The rem unit plays no part in this. If you use rem in your media query, it will also evaluate to medium. i.e. It would not be affected by any font size assigned to the root element in your styling.

Rem not compatible with media queries?

Using rem sizes the font based on the 'root element', hence rem. The root element is actually the html element, not the body. So, changing the font size of the body element is no longer relevant when you're then defining the font size of a subelement based on its parent.

Replace body with html in your sample and it'll work fine.

REM units in Stroke-width on high density displays

Yes it's a bug.

It turns out that Paul LeBeau pointed me in the right direction - this problem is replicable in stock Samsung browsers but NOT in the Chrome browser on the same devices.

Thus:

Some browsers (even if they share a common base) will have certain bugs and this is one of them, so be aware of that when using REM units in SVG on mobile :)

Setting root font-size not affecting rem units in Safari for margin, padding, etc

Maybe that's some trouble with Safari setting minimum font sizes. Safari does not allow fonts to be "too small", so I guess your scaling does not work as expected in Safari.

This was discussed here:
Media Queries issue: Safari not scaling elements in REM

Use of rem, em and px on image dimensions

• px renders the pixel value
• rem uses the root element (html) using its font-size as the base (16px by default) to calculate its size, so basically your rem value from img multiplied by the font-size on html
• em uses the first parent with a font-size to calculate the size it needs to render (calculated the same as rem above - parent computed px value multiplied by your em). If a that parent is using em in its font-size, the child will use the computed/calculated font-size of the parent.

Explanation can be tough to grasp (especially em), have a look here: https://jsfiddle.net/6ydf931w/

For the most part, I tend to avoid using em for almost everything because it can result in unexpected results if you are not permanently aware of where it is used.

I usually limit rem to text in the event it needs to be changed globally.

px is very predictable, if this works for you, there is no harm in using it.

---

Related Topics