Media queries with rem units in Chrome?
css, google-chrome, media-queries
Solution
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.
Problem
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/.