Eenheden

Voor onder andere fontgroottes en ruimtes kun je gebruikmaken van verschillende eenheden. De standaard eenheid die gebruikt wordt is "px". Deze eenheid geef je op in het aantal pixels. Naast pixels kun je gebruikmaken van onderstaande eenheden.

• px
• em
• rem
• vw
• vh
• cqw
• cqh
• calc

 

px
Eén pixel is een enkel punt op het scherm. Dit is de meest gebruikte eenheid voor het nauwkeurig specificeren van afmetingen.

em
Deze eenheid is relatief aan de lettergrootte van het ouderelement. Als de tekstgrootte van het ouderelement bijvoorbeeld 16px is, is 1em gelijk aan 16px.

Bijvoorbeeld: font-size: 2em; betekent dat de tekst twee keer zo groot is als de lettergrootte van het ouderelement.

rem
Net als em, maar in plaats van relatief te zijn aan het ouderelement, is het relatief aan de lettergrootte van het -element (meestal 16px als dit niet is aangepast).

Bijvoorbeeld: font-size: 1.5rem; betekent dat de tekst 1.5 keer de standaard lettergrootte van het -element is (meestal 24px als de basisgrootte 16px is).

vw (viewport width)
1vw is gelijk aan 1% van de breedte van de weergavepoort (het zichtbare deel van de webpagina). Dit wordt vaak gebruikt voor responsief ontwerp.

Bijvoorbeeld: width: 50vw; betekent dat de breedte van het element 50% van de breedte van de weergave is.

vh (viewport height)
1vh is gelijk aan 1% van de hoogte van de weergavepoort. Net als bij vw is dit handig voor responsief ontwerp.

Bijvoorbeeld: height: 100vh; betekent dat het element 100% van de hoogte van de weergave in beslag neemt.

cqw (Container Query Width)
cqw staat voor 1% van de breedte van de container waarin het element zich bevindt. Dit betekent dat de breedte van een element wordt aangepast op basis van de breedte van de container waarin het zich bevindt, in plaats van op basis van de breedte van de volledige viewport.

Bijvoorbeeld: width: 50cqw; betekent dat het element 50% van de breedte van zijn container zal innemen.

cqh (Container Query Height)
cqh staat voor 1% van de hoogte van de container waarin het element zich bevindt. Dit betekent dat de hoogte van een element wordt aangepast op basis van de hoogte van de container in plaats van de hoogte van de volledige viewport.

Bijvoorbeeld: height: 100cqh; betekent dat het element 100% van de hoogte van zijn container inneemt.