Viewport width and height calculations

Rather than using px and em you can also use the vw and vmin to resize elements which depend on the width and height of the display.

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;
}

Demo

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹