Em’s in Media Queries

The Scenario: You are building a site, the designer has set what looks like a base font size of 13px. So you go ahead and set body{font-size: 13px;} and carry on using this as the value for your measurements. Need something to be 26px? font-size: 2em; etc.

You ran into a problem though when you set up your media queries with ems:

@media screen and (max-width: 76.9230769em){
	/*1000px? No*/
}

They were not breaking where you wanted them to. In fact they break early.

As it turns out:

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’

Source: http://www.w3.org/TR/css3-mediaqueries/#units

So even if you have declared a new font-size you will still be working on the initial font-size of the browser. Which by default is 16px:

@media screen and (max-width: 62.5em){
	/*1000px? YES!*/
}

So if you ever find that your media queries are not quite breaking where you need, double check your measurements. A gotcha if you almost always work with a 16px base.!