Why doesn't em font-size resize on responsive grid?

Question

I've created a responsive grid and used em as the font-size to make the text resize, but I must not be fully understanding how em's work as there is no resizing of text.

Live site: http://www.rubytuesdaycreative.co.uk/testsite/shop.html

Following Ethan Marcottes book I've set the body font to font-size:100% and then made by text within the cpation on the page linked above as 2ems - so double the base size... Am I doing it wrong? It doesn't seem to change at all.

http://jsfiddle.net/jm3sK/

Answer 1

I think what you are looking for is @mediaqueries. Em is not a magic-bullet unit that will resize based on the browser width. It is a relative unit.

If you want any CSS to change based on the browser width, use @media queries.

ems are useful in this case because you only have to change one value (body{font-size}) to scale all the rest of the page. Because they are relative, not because the the browser changed. You can use these techniques together.

Here is a quick example. Resize the window.

body{font-size:100%;}
i{font-size: 2em;}


@media screen and (min-width: 500px) {
    body{font-size: 150%;}
}

@media screen and (min-width: 700px) {
    body{font-size: 200%;}
}

​