CSS-enhetskonverterare
Konvertera mellan px, rem, em och vw-enheter med konfigurerbar bas-teckenstorlek och viewport-bredd. Viktigt för responsiv CSS-design. Gratis verktyg.
Ekvivalenter
Referens
CSS-enheter
CSS erbjuder både absoluta och relativa enheter. Absoluta enheter som px är fasta oavsett kontext. Relativa enheter som rem, em och vw skalar baserat på en referens — vilket gör dem avgörande för responsiva, tillgängliga layouter.
px, rem, em, vw
px (pixlar) — en absolut enhet. 1px är en enhetsoberoende pixel. Använd för ramar, skuggor och element som inte ska skalas med teckenstorlek.
rem (root em) — relativ till rot-elementets (html) teckenstorlek. Webbläsarens standardstorlek är 16px. Föredras för teckenstorlekar och avstånd eftersom den respekterar användarens webbläsarinställning för teckenstorlek.
em — relativ till föräldra-elementets teckenstorlek. Kan sammanräknas i nästlade element. Användbar för utfyllnad och marginaler som ska skalas med elementets egen teckenstorlek.
vw (viewport-bredd) — 1vw = 1% av viewport-bredden. Utmärkt för flytande typografi och helbreddslayouter som anpassas till skärmstorlek.
Vanliga px till rem-konverteringar
Med webbläsarens standardbas på 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. För viewport-enheter vid en 1440px-design: 14.4px = 1vw, 72px = 5vw.
Varför rem föredras för tillgänglighet
Att använda rem för teckenstorlekar respekterar användarens webbläsarinställning för teckenstorlek. När en användare ställer in sin webbläsare till 20px istället för standard 16px, skalar rem-baserade layouter proportionellt medan px-baserade layouter förblir fasta. WCAG 1.4.4 (Ändra storlek på text) kräver att text kan förstoras upp till 200% utan förlust av innehåll eller funktionalitet — rem-enheter uppfyller detta krav naturligt.
Integritet
All konvertering körs 100% i din webbläsare. Ingen data skickas till en server.