Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,440 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

Allright, thank you.