A quick article on the merits of using em based media queries over px

ems-v-px.md

Quick Tip: Em based media queries

Using pxs in your media queries assumes a set font-size. This means that, in some browsers, things can break pretty quickly if the user has set a larger default font-size or manually increases the font on your site. (It is worth noting that some browsers will require a refresh to render properly if the font-size is increased after the page has already loaded.)

The way to avoid this is to use ems instead of pxs. Ems are based on the font-size of their parent container and so when the font increases so does the container it lives in.

Another option similar to ems is to use rems (which stands for "root ems"). Rems, like ems, are based on font-size, but instead of using the font-size of the parent container, rems are calculated based on the root font-size - that is the font-size of the html tag.

Whether you use ems or rems, by creating a fluid system of proportions rather than rigid (px) layout, things keep working and are readable for users that need larger fonts.

###Further Reading http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
http://css-tricks.com/zooming-squishes/

Rad. I think for a "Further Reading section" it'd be good to include a link to:

• http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
• http://css-tricks.com/zooming-squishes/

Also maybe hyphenate font-size (just like CSS or whatever) for readability.

This is totally awesome! 🤘

One thing to note is that each media query condition containing ems will always be based on the default 16px of the body no matter what, but correct me if I am wrong O_o

With rems to clarify you can change the base size of the root (HTML) and use that as your base instead of the constant 16px used by the body when using ems in MQ conditions.