Viewport width and height calculations

HTML

<!--
vw: 10vw would be 10% of the viewport's width.
vh: 3vh would be 3% of the viewport's height.
vmin: 70vmin would be 70% of the viewport's smaller dimension (height vs. width).
vmax: 100vmax would be 100% of the viewport's bigger dimension (height vs. width).
-->
<div class='demo-div mb-2 width-vw-10'></div>
<div class='demo-div mb-2 width-vmin-10'></div>
<div class='demo-div mb-2 width-vmax-10'></div>
<div class='demo-div mb-2 height-vh-10'></div>

CSS

.demo-div {
background:#58bb39 linear-gradient(45deg,#58bb39,#2f731a);
border-radius:3px;
height:30px;
}
.width-vw-10 {
width:10vw;
}
.height-vh-10 {
height:10vh;
}
.width-vmin-10 {
width:10vmin;
}
.width-vmax-10 {
width:10vmax;
}