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

Spencer Merritt
Spencer Merritt
10,615 Points
Posted by 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

Michael Pare
Michael Pare
6,358 Points

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!