CSS-enhetskonverterer
Konverter mellom px, rem, em og vw-enheter med konfigurerbar basis skriftstørrelse og visningsbredde. Essensielt for responsiv CSS-design. Gratis verktøy.
Ekvivalenter
Referanse
CSS-enheter
CSS tilbyr både absolutte og relative enheter. Absolutte enheter som px er faste uavhengig av kontekst. Relative enheter som rem, em og vw skalerer basert på en referanse — noe som gjør dem essensielle for responsive, tilgjengelige layouter.
px, rem, em, vw
px (piksler) — en absolutt enhet. 1px er én enhetsuavhengig piksel. Bruk for kantlinjer, skygger og elementer som ikke skal skalere med skriftstørrelsen.
rem (root em) — relativ til rot-elementets (html) skriftstørrelse. Standard nettleser rotstørrelse er 16px. Foretrukket for skriftstørrelser og mellomrom fordi den respekterer brukerens nettleser-skriftstørrelsesinnstilling.
em — relativ til foreldreelementets skriftstørrelse. Kan akkumuleres i nestede elementer. Nyttig for utfylling og marginer som skal skalere med elementets egen skriftstørrelse.
vw (visningsbredde) — 1vw = 1% av visningsbredden. Flott for flytende typografi og fullbreddelayouter som tilpasser seg skjermstørrelsen.
Vanlige px-til-rem-konverteringer
Med standard nettleserbasis på 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. For viewport-enheter på et 1440px-design: 14.4px = 1vw, 72px = 5vw.
Hvorfor rem er foretrukket for tilgjengelighet
Bruk av rem for skriftstørrelser respekterer brukerens nettleser-skriftstørrelsesinnstilling. Når en bruker setter nettleseren til 20px i stedet for standard 16px, skalerer rem-baserte layouter proporsjonalt mens px-baserte layouter forblir faste. WCAG 1.4.4 (Endre tekststørrelse) krever at tekst kan endres opp til 200% uten tap av innhold eller funksjonalitet — rem-enheter oppfyller dette kravet naturlig.
Personvern
All konvertering kjører 100% i nettleseren din. Ingen data sendes til en server.