Konvertering af CSS-enheder er processen med at omregne mellem forskellige længdeenheder (px, em, rem, %, vw, vh osv.) brugt i webdesign.
Absolutte og relative enheder
CSS-enheder kan opdeles i absolutte og relative. Absolutte enheder (px, pt, cm osv.) har faste størrelser, mens relative enheder (em, rem, %, vw, vh osv.) er angivet som forhold til en basisværdi.
px (Pixel)
Den mest almindelige enhed, repræsenterer en enkelt prik på skærmen. Nem at arbejde med pga. fast størrelse, men kan give tilgængelighedsproblemer, da den ignorerer brugerens skriftindstillinger.
em (Em)
En relativ enhed baseret på forælderens skriftstørrelse. 1em = forælderens font-size. Beregnes kumulativt i indlejrede strukturer, hvilket kan føre til uventede størrelser ved dyb indlejring.
rem (Root Em)
En relativ enhed baseret på roden (html) skriftstørrelse. 1rem = html's font-size (normalt 16px). I modsætning til em påvirkes rem ikke af indlejring og anbefales i moderne CSS.
% (Procent)
Angiver en andel i forhold til forælderens størrelse. For font-size er det baseret på forælderens font-size; for width er det baseret på forælderens bredde. Basen varierer efter egenskab.
vw/vh (Viewport enheder)
Enheder baseret på viewport-størrelsen. 1vw = 1% af viewport-bredden, 1vh = 1% af viewport-højden. Gør det muligt at skabe fleksible layouts, der reagerer på skærmens størrelse.
pt/pc (Trykeenheder)
Enheder brugt i trykkeribranchen. 1pt = 1/72 inch, 1pc = 12pt. Bruges i print-CSS og PDF-generation, men px eller rem bruges typisk til skærmvisning.
Fysiske enheder (cm/mm/in)
Enheder, der repræsenterer fysisk længde. 1in = 2.54cm = 25.4mm = 96px (CSS-definition). Bruges når der skal være konsistens med trykte materialer, men skærmens fysiske størrelse er ikke garanteret.
Fordele ved realtidskonvertering
Dette værktøj understøtter realtidskonvertering og opdaterer resultater øjeblikkeligt ved ændring af basisværdier. Gør det nemt at verificere udseende ved forskellige skærmstørrelser og skriftindstillinger.