I guess this migth seem to be a basic questions, but Im still wondering:
When do u use what ? is there any design “rules” for using them the “right” way ?
Of course on widths it seems obvious that I use VW and on hights VH,
but I can actually use VH on widths too… so is there special cases, I just
dont see, where I do mix them up ? Is there kind of a reference I stick to ?
and which of both do u use for Fonts for example, or button sizes…
Hey @rico, @matthewpmunger answer is pretty complete, i ll just add that you shouldn’t use VH for width and VW for height, doesn’t seems like a good idea in my opinion
thx for this basic overview ! Im still quite new working with html/css etc so this helps as a base.
though Im wondering for example EM for fonts doesnt really help if it comes to responsive design
as I have to work on mostly !? so I need get most of all my fonts used to get scaled with the viewport
(in whatever way this can be done…)
Using VW for height or VH for width is an excellent way to ensure that your aspect ratios stay intact. If you’re good at math, using VW for both WxH or VH for both HxW is a very powerful option.
I especially use vw for the height or max-height of subsection of a fullscreen section, on mobile. Say I have a header block in a fullscreen section on mobile, I’ll make everything elastic in the header block, and control the height of the header with VW, so I have a consitant design from iPhone 4 to the largest smartphones.