Teil 3
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Absolute_length_units
http://jsbin.com/zapifak/edit?html,css,js,output
px
Pixel, je nach Anzeigegerät
cm, mm
1 cm / mm auf Display
in
Zoll, 1in = 2.54cm
pc
Picas, 1pc = 12pt = 1/6in
pt
Punkte, 1pt = 1/72i
Relativ zur Schriftgrösse
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Font-relative_lengths
http://jsbin.com/hayico/edit?html,css,output
em
Schriftgrößen, 1em = aktuelle Schriftgröße
rem
Die Schriftgröße des Wurzelelements (<html>)
ch
Breite der Null ("0") der aktuellen Schriftart.
ex
Schrifthöhe, 1ex = aktuelle Schrifthöhe
http://jsbin.com/xikupu/edit?html,css,output
Relativ zum Viewport
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
http://jsbin.com/toxiza/edit?html,css,output
vh
1/100 der Viewport Höhe
vw
1/100 der Viewport Breite
vmin
1/100 des kleinstmöglichen Wertes zwischen der Höhe und Breite des Viewports
vmax
1/100 des grösstmöglichen Wertes zwischen der Höhe und Breite des Viewports
http://jsbin.com/valiqu/edit?html,css,output
https://developer.mozilla.org/de/docs/Web/CSS/percentage
Immer kontextabhängig
Meistens auf Elternelement bezogen
Prozente richtig anwenden
https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-elements
:before
:after
<div>
</div>
Ursprünglicher <div> Inhalt
Pseudo Elemente für grafische Elemente verwenden
https://css-tricks.com/the-lengths-of-css/
http://www.impressivewebs.com/understanding-em-units-css/
http://jsbin.com/quqiyu/edit?html,css,output
http://jsbin.com/zacoxu/edit?html,css,output
By Gion Kunz
