CSS enhetskonvertering er prosessen med å konvertere mellom ulike lengdeenheter (px, em, rem, %, vw, vh osv.) brukt i webdesign.
Absolutte og relative enheter
CSS-enheter deles grovt i absolutte og relative enheter. Absolutte enheter (px, pt, cm osv.) har faste størrelser, mens relative enheter (em, rem, %, vw, vh osv.) uttrykkes som forhold til en basisverdi.
px (Pixel)
Den mest brukte enheten, som representerer ett punkt på skjermen. Enkel å håndtere med fast størrelse, men gir utfordringer for tilgjengelighet fordi den ignorerer brukerens skriftinnstillinger.
em (Em)
En relativ enhet basert på foreldreelementets skriftstørrelse. 1em = foreldres font-size. Kalkuleres kumulativt i nestede strukturer, noe som kan gi uventede størrelser.
rem (Root Em)
En relativ enhet basert på rot-elementets (html) skriftstørrelse. 1rem = html font-size (vanligvis 16px). Ikke påvirket av nestning, anbefales i moderne CSS.
% (Prosent)
Representerer forhold til foreldreelementets størrelse. For font-size baseres det på foreldres font-size; for width på foreldres bredde. Grunnlaget varierer med egenskapen.
vw/vh (Viewport-enheter)
Enheter basert på viewport (visningsområde). 1vw = 1% av viewport-bredden, 1vh = 1% av viewport-høyden. Gir fleksible layouter som responderer på skjermstørrelse.
pt/pc (Trykkenheter)
Enheter brukt i trykkeribransjen. 1pt = 1/72 tomme, 1pc = 12pt. Brukes i print-CSS og PDF-generering, men px eller rem er typisk for skjermvisning.
Fysiske enheter (cm/mm/in)
Enheter som representerer fysisk lengde. 1in = 2.54cm = 25.4mm = 96px (CSS-definisjon). Brukes når konsistens med trykte materialer trengs, men skjermens fysiske størrelse er ikke garantert.
Fordeler med sanntidskonvertering
Dette verktøyet støtter sanntidskonvertering og oppdaterer resultatene umiddelbart når basisverdier endres. Effektivt for rask verifisering av utseende med forskjellige skjermstørrelser og skriftinnstillinger.