Proportional Media Queries - ems!

Found this excellent blog post by Lyza Gardner (post date March 28, 2012).

The EMs have it: Proportional Media Queries FTW! 

In this article Lyza expounds the virtue of using not pixels in media queries, but ems.  I'd always used pixels and though I was pretty cool doing it.  

So what's the difference?  Pixels have a fixed size.  Ems do not - they are based on the current font size.  If the viewer increases the font size a pixel based media query is likely to fail.  The em unit media query is still going to work.

Fortunately it is not hard to change the base unit of your media queries.  Here's how:

1. We assume that the base font size is 16px - because it is a pretty good guess as most browsers use this as the default font size.

2. We know that 16px = a font size of 100% = 1em.  With me so far?

3. Take all those pixels based media queries and divide them by 16 and substitute the em unit.  Bingo.

e.g.

@media only screen and (max-width: 1040px)  {
}

@media only screen and (max-width: 960px)  {
}

Becomes
 

@media only screen and (max-width: 65em)  {
}

@media only screen and (max-width: 60em)  {
}