Konvertering av CSS-enheter är processen att räkna om mellan olika längdenheter (px, em, rem, %, vw, vh osv.) som används i webbdesign.
Absoluta och relativa enheter
CSS-enheter delas grovt in i absoluta och relativa enheter. Absoluta enheter (px, pt, cm osv.) har fasta storlekar, medan relativa enheter (em, rem, %, vw, vh osv.) uttrycks som andel av en basvärde.
px (Pixel)
Den vanligaste enheten som representerar en punkt på skärmen. Lätt att hantera med fast storlek, men kan ge tillgänglighetsproblem eftersom den ignorera användarens typsnittsinställningar.
em (Em)
En relativ enhet baserad på förälderns typsnittsstorlek. 1em = förälderns font-size. Beräknas kumulativt i nästlade strukturer vilket kan leda till oväntade storlekar.
rem (Root Em)
En relativ enhet baserad på rot-elementets (html) typsnittsstorlek. 1rem = html font-size (vanligtvis 16px). Till skillnad från em påverkas den inte av nästling och rekommenderas i modern CSS.
% (Procent)
Representerar en andel av förälderelementets storlek. För font-size baseras den på föräldern; för width på förälderns bredd. Referensen varierar beroende på egenskap.
vw/vh (Viewport-enheter)
Enheter baserade på viewportens storlek. 1vw = 1% av viewport-bredden, 1vh = 1% av viewport-höjden. Möjliggör flexibla layouter som svarar på skärmstorlek.
pt/pc (Tryckenheter)
Enheter som används i tryckindustrin. 1pt = 1/72 tum, 1pc = 12pt. Används i print-CSS och PDF-generering; för skärm används oftare px eller rem.
Fysiska enheter (cm/mm/in)
Enheter som representerar verklig fysisk längd. 1in = 2.54cm = 25.4mm = 96px (CSS-definition). Används när överensstämmelse med tryckta material krävs, men skärmens fysiska storlek är inte garanterad.
Fördelar med realtidskonvertering
Detta verktyg stödjer realtidskonvertering och uppdaterar resultaten omedelbart när basvärden ändras. Möjliggör snabb kontroll av utseende på olika skärmstorlekar och typsnittsinställningar.