Handling of the rem unit in Media Queries

Resize the browser window. When the browser window hits a color bar, the background should be filled with that color.

See a similar test with pixel measurements only.

Browser support and behavior

Bottom line: rem unit is useless in Media Queries, as per the spec, unless you want it to mean “initial value of font-size” (16px in most browsers), though I suggest that for that you use the em unit for the sake of clarity.

Details: current Media Queries spec says that Relative units in media queries are based on the initial value. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’. So the html {font-size: 20px} in this example is rightfully ignored in Media Queries.

Current browser support: