Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Akhter Rasool
Akhter Rasool
8,597 Points
Posted by Akhter Rasool
Akhter Rasool
8,597 Points

Em units for fontsizes

If i use the following code:

body{ font-size:1 em; }

will my body font-size increase or decrease as i increase or decrease my browser's width? if no, could you tell me what happens?

1 Answer

Miroslav Kovac
Miroslav Kovac
11,454 Points
Miroslav Kovac
Miroslav Kovac
11,454 Points

Hello,

The 'em' units are units which set the font-size relative to the parent element (for body it is html element). So, I think that your css 

body{ font-size: 1em; }

is not the correct use. First you should define the default font-size like:

html { font-size: 16px; }

Then the 16px will be also used for body element because of '1em'.

But in any case, I think that the 'em' units will not helps you to change your font-size depending on browser width.

You ca try to use @media queries or viewport units for this. 

@media screen and (min-device-width: 600px) { 
  p {  font-size: 1.25em; }
}

p {  font-size: 4vw; }
Akhter Rasool
Akhter Rasool
8,597 Points
Akhter Rasool
Akhter Rasool
8,597 Points

Allright, thank you.