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

Spencer Merritt
Spencer Merritt
10,615 Points

Viewport Units vs Percentages

I've done a little responsive design using em's and percentages to scale my fonts and divs, ect. I'm now learning about viewport units like vw, vh, ect. Which essentially are they same thing right? 1vw = 1% of the viewport width. So my question is: when to use em's , percents , vw , vh , ect. Benefits of each?

2 Answers

This article does a pretty good job explaining how vw, vh, vmin and vmax work http://css-tricks.com/viewport-sized-typography/

You check caniuse.com to see when these units would be appropriate to use: http://caniuse.com/viewport-units If you need a design to work on IE8 for instance, you should not use viewport units.

The benefit of being able to use a viewport relative unit is probably in something like font size (as noted in the article above). When using vws or vhs, units are relative to the viewport rather than relative to their parent or the root as in other CSS units.

em = relative to parent rem = relative to root vw = relative to viewport width vh = relative to viewport height % = relative to parent.

So if you wanted to make your font size 10% of the viewport width without calculating it in ems, rems, or pixels, you can simply declare font-size:10vw.

vw and percent are not the same since percentages are relative to the parent container. If you have a div set to width:50% inside a container set at 1200px on a window that is 1400px wide, your div will be 600px wide (1200 * 50%). Using vws, however, your width will be 50% of the viewport size, therefore 700px (1400px *50%). I made this codepen to illustrate the difference.

http://cdpn.io/fIJeB

Hope that helps!