Pixels (px)

De meest gebruikte eenheid in webdesign is pixel. Een pixel staat voor een stipje op je website. In die zin is de pixel heel exact. Een element op één plek van de website van 100 pixes en een ander element op een totaal andere plek op de website van ook 100 pixels breed zijn even breed. Altijd.

Het feit dat pixels zo voorspelbaar zijn maakt ze eenvoudig in gebruik. Net als een centimeter altijd een centimeter is. Er zitten echter ook een nadeel aan. Niet elk scherm bestaat uit evenveel pixels. Veel computerscherm zijn tegenwoordig een kleine 2000 pixels breed, terwijl een smartphone niet ver boven de 600 komt. Een element wat 1000 pixels breedt is, is op een computer slechts de helft van het beeld. Op een smartphone past deze echter niet op het scherm. Dat maakt dat pixels bij een responsive website soms danig in de weg kunnen zitten.

Percentage (%)

Een andere manier om de grote van iets aan te geven is het opgeven van een percentage. Als je een percentage opgeeft, bedoel je daarmee een percentage van het element waar dit element in zit. Bij Webanizr websites is dit altijd het direct omliggende element. Schrijf je ruwe html en css is het het eerst omliggende element dat de positie-eigenschap absoluut, relatief of vast heeft.

Percentage is een populaire eenhoud voor responsive websites omdat de inhoud schaalt naar de grootte van het scherm. Mits het gebruik van percentages consequent is doorgevoerd.

Em

Em is een eenhoud dit vaak wordt gebruikt bij tekst, in veel geval om regelhoogte aan te geven. Oorspronkelijk gaf de eenheid de grootte van de letter M aan, vandaar de naam. Nu geeft het grofweg de hoogte van een tekstregel aan. Met de grootte 2 em bedoel je dus eigenlijk 2 regels.

Rem

Rem ligt heel dicht bij de eenheid em. Er is echter een klein verschil. Em is een eenheid om basis van de huidige standaard. Op het moment dat je bijvoorbeeld de regelhoogte op 2 em zet en daarbinnen wederem een element plaatst met een regelhoogte van 2 em dan wordt hierbij de regelhoogte wederom 2 keer zo groot.

De grootte van Rem is niet gebaseerd op de al aanwezige regelhoogte. maar op de grootte van het gebruikte font en fontgrootte. 2 rem is dus letterlijk 2 regels, gebaseerd op het font en de grootte van het font. Dit maakt rem wat voorspelbaarder.

Point (pt)

Point is een eenheid uit de drukwereld. Een punt in drukwerk is ruwweg vergelijkbaar met de definitie van een pixel voor beeldschermen. Bij beeldschermen wordt een point omgezet in een aantal pixels. Het is dus ook een vaste eenheid net als pixels. Het omzetten gebeurd op basis van de instellingen van de computer. Dat maakt point een wat onvoorspelbare eenheid. In webdesign wordt daar om bij voorkeur de pixel gebruikt als vaste eenheid.

Viewport width (vw) en viewport height (vh)

De viewport width en viewport height zijn relatieven nieuwe eenheden. Beide zijn een percentage van het huidige scherm, respectievelijk van de breedte en de hoogte. In die zin zijn ze vergelijkbaar met percentage. De afmeting wordt echter altijd gebaseerd op de grootte van het scherm, ongeacht hoe veel elementen binnen elkaar worden geplaatst. De viewport width en viewport height worden door oude browser niet ondersteund.