Question

Is it possible to use rem units in Chrome media queries?

rem units work flawlessly in Chrome, it just seems that they are not supported in media queries. Is this possible? Or is there something else wrong with this CSS?

body { background-color: yellow; }

@media only all and (max-width: 40rem) {
    body { background-color: red; }
}

@media only all and (min-width: 40rem) and (max-width: 60rem) {
    body {background-color: green;}
}

@media only all and (min-width: 60rem) {
    body { background-color: blue; }
}

Live at http://jsfiddle.net/jsQ2N/2/show/, em-only version at http://jsfiddle.net/jsQ2N/3/show/.

Answer 1

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.