Rem not compatible with media queries?

问题

I'm using CSS breakpoints to update the font-size on my site.
Regular text respond as expected, but the text affected by a class using rem value doesn't.
Anyone have an idea why?

(Try the snippet in full page and resize your browser)

body { font-size: 22px; }
.test { font-size: 2rem; }

@media only screen and (max-width: 1280px) {
	body { font-size: 20px; }
}
@media only screen and (max-width: 1024px) {
	body { font-size: 17px; }
}
@media only screen and (max-width: 800px) {
	body { font-size: 15px; }
}
@media only screen and (max-width: 648px) {
	body { font-size: 18px; }
}

Example
<div class="test">Example</div>

回答1:

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.

回答2:

You're setting the font-size on the wrong element. rem is the Root em unit. The document root isn't body, but html.

If you change all those body references to html references, everything will work fine.

来源：https://stackoverflow.com/questions/27051179/rem-not-compatible-with-media-queries