A CSS egységátváltás különböző hosszúsági egységek (px, em, rem, %, vw, vh stb.) közötti átváltás folyamata, amelyet webdizájnban használnak.
Abszolút és relatív egységek
A CSS egységek nagyjából abszolút és relatív típusokra oszthatók. Az abszolút egységek (px, pt, cm stb.) rögzített méretűek, míg a relatív egységek (em, rem, %, vw, vh stb.) egy alapértékhez viszonyított arányok.
px (Pixel)
A leggyakoribb egység, amely a képernyő egy pontját jelenti. Könnyű vele dolgozni a rögzített méret miatt, de akadályozhatja az elérhetőséget, mert figyelmen kívül hagyja a felhasználói betűméret-beállításokat.
em (Em)
Relatív egység, amely a szülő elem betűméretén alapul. 1em = a szülő font-size-ja. Beágyazott struktúrák esetén kumulatív számításhoz vezethet, ami váratlan méreteket okozhat.
rem (Root Em)
Relatív egység, amely a root elem (html) betűméretén alapul. 1rem = html font-size (általában 16px). Nem függ az egymásba ágyazódástól, ezért modern CSS-ben ajánlott.
% (Százalék)
A szülő elemhez viszonyított arányt jelenti. Betűméretnél a szülő betűméretén alapul; szélességnél a szülő szélességén. A referenciapont tulajdonságfüggő.
vw/vh (Viewport egységek)
Az ablak (viewport) méretéhez kötött egységek. 1vw = az ablak szélességének 1%-a, 1vh = az ablak magasságának 1%-a. Rugalmas elrendezést tesznek lehetővé.
pt/pc (Nyomtatási egységek)
A nyomdaiparban használt egységek. 1pt = 1/72 inch, 1pc = 12pt. Nyomtatási CSS és PDF generálás esetén használatosak; képernyőn általában px vagy rem az elterjedtebb.
Fizikai egységek (cm/mm/in)
Olyan egységek, amelyek valódi fizikai hosszúságot jelölnek. 1in = 2.54cm = 25.4mm = 96px (CSS definíció). Hasznos nyomtatott anyagokkal való egyeztetésnél, de a képernyő fizikai mérete nem garantált.
Valós idejű konverzió előnyei
Ez az eszköz valós idejű konverziót támogat, és az alapértékek változásakor azonnal frissíti az eredményeket. Gyors ellenőrzést tesz lehetővé különböző képernyőméretek és betűbeállítások mellett.