CSS-eenhedenconverter

Referentie

CSS-eenheden

CSS biedt zowel absolute als relatieve eenheden. Absolute eenheden zoals px zijn vast ongeacht de context. Relatieve eenheden zoals rem, em en vw schalen op basis van een referentie — waardoor ze essentieel zijn voor responsieve, toegankelijke layouts.

px, rem, em, vw

px (pixels) — een absolute eenheid. 1px is één apparaatonafhankelijke pixel. Gebruik voor randen, schaduwen en elementen die niet mee moeten schalen met de lettergrootte.

rem (root em) — relatief ten opzichte van de lettergrootte van het root-element (html). De standaard browserrootgrootte is 16px. Aanbevolen voor lettergroottes en afstanden omdat het de browserlettergrootte-instelling van de gebruiker respecteert.

em — relatief ten opzichte van de lettergrootte van het ouderelement. Kan cumulatief werken bij geneste elementen. Nuttig voor padding en marges die mee moeten schalen met de lettergrootte van het element zelf.

vw (viewportbreedte) — 1vw = 1% van de viewportbreedte. Geweldig voor vloeiende typografie en layouts op volledige breedte die zich aanpassen aan de schermgrootte.

Veelgebruikte px naar rem conversies

Met de standaard browserbasis van 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Voor viewporteenheden bij een 1440px ontwerp: 14.4px = 1vw, 72px = 5vw.

Waarom rem de voorkeur heeft voor toegankelijkheid

Het gebruik van rem voor lettergroottes respecteert de browserlettergrootte-voorkeur van de gebruiker. Wanneer een gebruiker de browser instelt op 20px in plaats van de standaard 16px, schalen rem-gebaseerde layouts proportioneel terwijl px-gebaseerde layouts vast blijven. WCAG 1.4.4 (Tekstgrootte wijzigen) vereist dat tekst tot 200% vergroot kan worden zonder verlies van content of functionaliteit — rem-eenheden voldoen hier op natuurlijke wijze aan.

Privacy

Alle conversie draait 100% in je browser. Er wordt geen data naar een server gestuurd.