Media queries with rem blocks in Chrome?

Question

Can I use rem elements in Chrome media queries?

rem devices work flawlessly in Chrome, it seems that they are not supported in media queries. Is it 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 http://jsfiddle.net/jsQ2N/3/show/ .

Answer 1

The spectrum talks about this relative units such as rem and em :

Relative units in media queries are based on an initial value, which means that units are never based on ad results. For example, in HTML, the unit "em" refers to the original "font-size" value.

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

Since Media Queries 3 does not define special rules for any specific units, except for the above quotation regarding relative units, rem should act as em , having fulfilled the initial font-size value. If it does not work in Chrome, this is most likely a mistake.

Answer 2

Turns out this is Webkit issue # 78295 (unsolved for 2012-08): CSS rem module support in Media Queries (via http://fvsch.com/code/bugs/rem-mediaquery/ ).

Answer 3

After posting the answer below this question, I was listening. I did a bit more tests in Chrome with the site I'm working on. The rem message, which is a bug in Chrome, is true, they do not work, so I go to pixels only for media queries.

* To answer your question, rems work for me to adjust the height of the content area using media queries. This is how the width of the Chrome interperets browser seems to be different from Firefox, but it is not a base issue.

Keep in mind that when I use rems and ems, after setting font-size: 1em; or font-size: 16px; for html or body. I tend to stick to font size: 1em; in the html tag. This creates a default value that works from what the user has set for the default font size on any device that they use. Rem refers to the root value of 1em. This root value is set by the default font for the user, so everything should scale according to the user's font size preference and be independent of device / pixel density.

This means that the user is using a “normal” 72 or 96 ppi device or Retina grid (or another screen with a high pixel density), everything should look “relatively” the same from device to device.