Viewport Percentage Units CSS HTML Layout Tutorial
Learn to use the new viewport length values in CSS to size elements relative to the viewing area. The way it differs from normal percentage lengths is that these lenghts are always relative to the viewport and not relative to their parent elements. It also helps to make text and other elements sized relative to the viewing area.
vw - unit equal to 1% of the viewport width
vh - unit equal to 1% of the viewport height
vmin - unit equal to 1% of whichever is smaller of "vw" and "vh"
vmax - unit equal to 1% of whichever is larger of "vw" and "vh"
<style>
body{ margin: 0px; }
#div1 {
width: 50vw;
height: 50vh;
background: #A4CFFF;
font-size: 3vw;
margin: 25vh 25vw;
}
</style>
<div id="div1">div content ...</div>