The vw and vh units in CSS
The units vw and vh allow you to set the size relative to the browser window viewport. Let's look at an example.
Let's say we have some div:
<div></div>
Let's give it a width of half the viewport width and a height of half the viewport height:
div {
width: 50vw;
height: 50vh;
margin: 30px auto;
border: 1px solid red;
}
Let's see what we get:
Given a div, give it a top padding equal to 30% of the viewport height.
Given a div, give it a width and height equal to 70% the viewport width.
