Search code examples
cssmedia-queries

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>

Solution

  • 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.