PX vs EM while using media queries

So today I received a job where I needed to match a websites responsive header to one of the games the company I am working for is making. Simple enough really.

When I started to look at the source code I could see that the developer was using EM rather then PX for their break points. After quite a lot of searching around the internet I couldn't see why using that unit of measurement in a media query was "better" than using px.

Any one care to enlighten me?

 

Are the content fonts fixed in PX idiocy? If not, why would you be using idiotic halfwit pixel bullshit as your breakpoints?!?

The whole reason to use EM's is so that the fonts auto-enlarge or auto-shrink to the user's preference. If the fonts are scaling, shouldn't the layout those fonts are sitting in also be scaling? As should things like column widths? Therein, your media query breakpoints should ALSO be in EM's since what it happens to look like on your VGA/normal/96dpi/100%/win7small/whateverTheBlazesThey'reCallingItThisYear is NOT going to be the same content size as it is at 8514/large/120dpi/125%/win7medium/whateverTheBlazesThey'reCallingItThisYear.

JUST as you shouldn't be declaring fixed widths in pixels, or fixed fonts in pixels, you shouldn't be thinking pixels for your media queries as then you are targeting the device, NOT the needs of the content. It's why when people ask questions like "what width should I use to target an iPad" I react with "Wrong question, which means you aren't getting it!"

You don't design to the device, you design to the needs of the content within the scope of all devices; that's why breakpoints should be in EM, not pixels... since your content text should be in EM, not pixels!

The ONLY reason to use pixels is for image interactions, so unless you're pissing all over the layout with garbage that has no business on websites in the first place like "perfect width" banner images you have NO business going near them for much of anything with only a handful of exceptions.

To use my EWI website as an example again, see how my EM max-width and triggers works...

EM max-width at vga/normal/96dpi/100%/whatever:
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

EM max-width at 8514/large/120dpi/125%/whatever
http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

Though laughably that site DOES use a PX media query trigger -- I wrote it before I understood responsive well enough to do it how I do it now... just like it using a separate stylesheet for it which I ALSO no longer do.... but still that's EM's in action.

That's NOT zoom, that's EM's doing exactly what we've been told to use them FOR! The side column is elastic, the content is elastic/dynamic, so of course the media query breakpoints should be... you guessed it, elastic. aka EM's.

So... yeah, learning it you can make the PX mistake, and it most certainly is a mistake.

Pixels for things like layout widths? As in content max-width, small column widths, and media query triggers? -- exact same ignorant bull as fixed width layouts. At best developer ignorance, at worst ineptitude of the highest order by sleazeball scumbags who can't be bothered to do anything properly... which sadly is the vast majority of PSD Jockeys who have the giant pair of brass to call themselves "designers".

Ignorance? I can forgive, I've done screwball things out of ignorance too. Ignorance isn't even an insult -- it just means you didn't know. It's the other side of the coin that I take issue with.