CSS-ühikute teisendamine on protsess teisendada erinevate pikkusühikute vahel (px, em, rem, %, vw, vh jne), mida kasutatakse veebidisainis.
Absoluutsed ja suhtelised ühikud
CSS-ühikud jagunevad laias laastus absoluutseteks ja suhtelisteks. Absoluutsed ühikud (px, pt, cm jne) on fikseeritud suurusega, suhtelised (em, rem, %, vw, vh jne) väljendatakse suhtena baasväärtusele.
px (Piksel)
Kõige tavalisem ühik, mis esindab ühte punkti ekraanil. Lihtne kasutada fikseeritud suuruse tõttu, kuid võib põhjustada ligipääsetavuse probleeme, kuna ignoreerib kasutaja fondi eelistusi.
em (Em)
Suhteline ühik, mis põhineb vanema elemendi fondi suurusel. 1em = vanema font-size. Sügavates hierarhiates võib kumulatiivne arvutus viia ootamatute tulemusteni.
rem (Root Em)
Suhteline ühik, mis põhineb root-elemendi (html) fonti suurusel. 1rem = html font-size (tavaliselt 16px). Erinevalt em-ist ei mõjuta see pesastumine ja on kaasaegses CSS-is soovitatav.
% (Protsent)
Esindab suhet vanema elemendi suurusest. Font-size puhul võrdub see vanema font-size'ga; width puhul vanema laiusega. Baas sõltub omadusest.
vw/vh (Viewport ühikud)
Ühikud, mis põhinevad vaateakna suurusel. 1vw = 1% vaateakna laiusest, 1vh = 1% vaateakna kõrgusest. Võimaldavad paindlikke paigutusi, mis reageerivad ekraani suurusele.
pt/pc (Trükiühikud)
Trükitööstuses kasutatavad ühikud. 1pt = 1/72 tolli, 1pc = 12pt. Kasutatakse trükistiilides ja PDF-generatsioonis, kuid ekraanil eelistatakse tavaliselt px või rem.
Füüsilised ühikud (cm/mm/in)
Ühikud, mis tähistavad reaalseid pikkusi. 1in = 2.54cm = 25.4mm = 96px (CSS määratlus). Kasutatakse, kui on vaja vastavust trükimaterjalidega, kuid ekraani füüsilist suurust ei saa garanteerida.
Reaalajas teisendamise eelised
See tööriist toetab reaalajas teisendamist ja uuendab tulemusi kohe baasväärtuste muutmisel. Lubab kiiresti kontrollida välimust erinevate ekraanisuuruste ja fondiseadetega.