Virtual width, Virtual Height, %

Question

Please in what scenario should i make use of vh,vw rather than percentage or px in css.

width:100%;height:100%;

or

width:100vw;height:100vh;

Which is advisable and why?

Possible duplicate of [CSS Units - What is the difference between vh/vw and %?](https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and) — Vanity Slug - codidact.com, Jul 27 '17 at 18:32
The v stands for _viewport_, just FYI, but as it stands this question is too broad or opinion-based. — chazsolo, Jul 27 '17 at 18:33
@chazsolo I provided an answer explaining some uses for it with a codepen link. Let me know if you find it helpful :) — Dead Community, Jul 27 '17 at 18:34

score 3 · Answer 1 · edited Aug 28 '19 at 10:22

The benefit of being able to use a viewport relative unit is probably in something like font size. 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!

Virtual width, Virtual Height, %

1 Answers1