CSS3 brings to the table some new units that aren't really relative to the content they are applied to—they are tied to the actual viewport they're currently seen in.
A little bit like rems, if you want a quick comparison for a better understanding.
Named as viewport percentage lengths, they are as follows:
vh: Viewport heightvw: Viewport widthvmin: Viewport minimum lengthvmax: Viewport maximum length
Viewport units are actually represented by percentages. 1vh means 1 percent of the visible area height.
Vmin instead is 1% of the smallest side, while Vmax is 1% of the largest side.
If you set measures with them, your layout can drastically change, for example, when the phone is held in portrait or landscape mode, so be careful.
It seems impractical, but it comes in handy in today's web design world.
Previously, such measures were handled by percentages, which are referred to the containing element, so you have to set measures for every item from the top to the bottom for them to...