CSS: units

Voor we verder gaan met declaraties bekijken we even de soorten units die je kan gebruiken als value.

Vast vs relatief

Vaste eenheden blijven altijd hetzelfde:

• px

Relatieve eenheden passen zich aan aan de bovenliggende element, het html-element of het browservenster:

• em
• rem
• %
• vw, vh

Vast of relatief?

Vaste eenheden lijken simpel, maar zijn vaak een struikelblok voor schaalbaarheid en toegankelijkheid.

px

Dit is kort voor pixel. Dit is een vaste eenheid. De onderstaande paragraaf zal dus een font-grootte hebben van 20 pixels.

p {
  font-size: 20px;
}

Dit is een tekst van 20px

rem

Is relatief ten opzichte van de font-grootte van het html-element.

De browser default is 16px maar kan aangepast worden door de gebruiker.

body {
  /* 1rem equals 16px */
  font-size: 1rem;  
}
 
p {
  /* 2rem equals 32px */
  font-size: 2rem;
}

Dit is een tekst van 2rem

Gebruik uitsluitend rem voor font-sizing!

Zo respecteer je de lettergrootte dat gebruikers instellen in hun browser.

em

em wordt minder gebruikt en is relatief ten opzichte van het bovenliggende (de parent) van het element.

<div>
  <p>
    Alle eendjes zwemmen in het water, ....
  </p>
</div>

div {
  font-size: 20px;
}
 
p {
  font-size: 2em; /* 2em = 40px */
}

Alle eendjes zwemmen in het water, ....

%

Procent (%) is gelijkaardig aan em en is dus ook relatief ten opzichte van het bovenliggende (de parent) van het element.

<div>
  <p>
    Alle eendjes zwemmen in het water, ....
  </p>
</div>

div {
  font-size: 20px;
}
 
p {
  font-size: 110%; /* 2em = 40px */
}

Alle eendjes zwemmen in het water, ....

vw, vh

Dit zijn viewport units. Deze zijn relatief aan de breedte of hoogte van het browser venster. Je kan deze dus gebruiken als je zaken wil laten meeschalen met de groote van je browservenster.

• vw: viewport width
• vh: viewport height

<div>
  <p>
    Alle eendjes zwemmen in het water, ....
  </p>
</div>

p {
  font-size: 1vw; /* 10% van de viewport width %/
}

Alle eendjes zwemmen in het water, ....