Viewport Units vs Percentages

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!