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/

Solution 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%;}
}

​

Solution 2

The em unit means the size of the font. It does not depend on browser window width at all.

The vw unit relates to the window width: it means 1/100 of the viewport width. But it has limited and buggy support in browsers.

Solution 3

Although this is an old question, I've recently come up with a solution.

If you define all text within the body as a percentage and then resize the text within the body on document.ready and on window.resize, the text remains 100% responsive.

e.g.

CSS
font-size: 100%;

JavaScript
function fontResize(){
    var perc = parseInt($(window).width())/125;
    $('body').css('font-size',perc);
}

JQuery
$(document).ready(function (){
    fontResize();
});

$(window).resize(function () {
    fontResize();
});

Comments

[Francesca]

I'm reading Ethan Marcottes book on RWD and it suggests using EM's due to their flexibility and that they can be used where a set pixel size shouldn't be used. Is this not correct?

[Jukka K. Korpela]

The em unit is flexible indeed, but when used for font-size, it makes the size vary by the parent element’s font size. To vary font size or other presentational issues by window width, you can use @media queries.

[Francesca]

How can I make it vary by the parent elements font size? Is it possible to make it vary as the caption div it is in changes size?

[Jukka K. Korpela]

By definition, setting font-size: 2em sets the font size to 2 times the parent element’s font size. But this does not depend on the size of the parent element at all; it depends on what has been set to its font size.

[REMITH]

What an answer. I wasted two days with CSS for Iphone screen issue. Thank you for your best solution with JS.