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

Other Items in css
Page Views

This page has been viewed 323 times.

Search Code
Search Code by entering your search text above.
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.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown