prisskreative
6/30/2014 - 4:27 PM

CSS Values and Units

CSS Values and Units

Viewport-Relative-length-units.html
content_copyfile_download
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>


<style>

/* rem (root em - best for font - relative to the font size of the root element ex:html) */

div{
  width:15vw; /* (vw - viewport width unit) resize with viewport 15% of view port*/
  margin:2vh; /* (vh - viewport height unit) 2%*resize with resizing the height not the width*/
  min-width: 80vmin; /* (vmin - viewport minimum value unit)*/
}
div{
  width:15vh; /* (viewport height unit) resize with viewport 15% viewport*/
}
div{
  width:15vh; /* (viewport height unit) resize with viewport 15% viewport*/
}
</style>
Relative-length-units.html
content_copyfile_download
<body>
<h1>hello</h1>
<div class="box">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

</div>
</body>

<style>

/*ex (font-size height of x letter)
  em (1em is equal 16px - divided 12/16 = .75) */
  

html{
  font-size:1em;
}
.box{
  width:30em;
  font-size:2em;/*em  The font size will be 2em (32px) + 1.2 em from the p = (38px) */
}
p{
  font-size:1.2em;
}

</style>
Absolute-length-units.html
content_copyfile_download
<!-- Absolute length units-->


<div class="cm">centimeters</div>
<div class="mm">milimeters</div>
<div class="in">inches</div>
<div class="pc">picas</div>
<div class="pt">points</div>
<div class="px">pixels</div>


<style>


.cm{
  width:21.16cm;
}
.mm{
  width:211.6mm;
}
.in{
  width:8.3in;
}
.pc{
  width:50pc;
}
.pt{
  width:600pt;
  font-size:28.4pt;
}
.px{
  width:600px;
  font-size:16px;
}

</style>