Using em's in responsive design

Question

I've created a responsive site and want to use em's to control the font size.

I've set the body font base size to 64.5% as recommended to create a base of 10px.

However, though the sizing seems OK, it does not change with the size of the browser. What am I missing?

http://jsfiddle.net/XaUz9/

Answer 1

See if this helps you: http://jsfiddle.net/panchroma/qK8j2/

In your example, you have explicity set the font sizes and there's nothing instructing the fonts to scale as the viewpont changes.

Setting
body{ font-size:62.5%; } simply sets the font size (relative to the browsers default setting), it won't result in any scaling.

A couple of ways you achieve what you want is to either set sizes for h1, h2, p etc as the viepoint changes using @media queries , eg

@media (max-width: 480px) {

h1 {font-size:  2em }
h2 {font-size: 1em}
p{font-size:1em}
}  

or you could set a default body font size at different viewpoints and the font sizes will scale relative to the setings you have at the head of your CSS file, eg

@media (min-width:481px) and (max-width: 767px) {

body{
font-size:90%;
}  
}