Konverzia jednotiek CSS je proces prepočtu medzi rôznymi jednotkami dĺžky (px, em, rem, %, vw, vh atď.) používanými vo webdizajne.
Absolútne a relatívne jednotky
CSS jednotky sa delia na absolútne a relatívne. Absolútne jednotky (px, pt, cm atď.) majú pevné rozmery, zatiaľ čo relatívne jednotky (em, rem, %, vw, vh atď.) sú vyjadrené ako pomer k základnej hodnote.
px (Pixel)
Najbežnejšia jednotka predstavujúca jeden pixel na obrazovke. Jednoduchá pri pevnej veľkosti, avšak môže zhoršovať prístupnosť, pretože ignoruje nastavenia písma používateľa.
em (Em)
Relatívna jednotka založená na veľkosti písma rodiča. 1em = font-size rodiča. V zanořených štruktúrach sa počíta kumulatívne, čo môže viesť k neočakávaným veľkostiam.
rem (Root Em)
Relatívna jednotka založená na veľkosti písma koreňového elementu (html). 1rem = font-size html (zvyčajne 16px). Na rozdiel od em nie je ovplyvnená zanořením, odporúčaná v modernom CSS.
% (Percento)
Reprezentuje pomer k veľkosti rodičovského elementu. Pre font-size je vzťahovaný na rodiča; pre width na šírku rodiča. Základ sa líši podľa vlastnosti.
vw/vh (Viewport jednotky)
Jednotky založené na veľkosti viewportu. 1vw = 1% šírky viewportu, 1vh = 1% výšky viewportu. Umožňujú flexibilné rozloženia reagujúce na veľkosť obrazovky.
pt/pc (Tlačové jednotky)
Jednotky používané v tlačiarenskom priemysle. 1pt = 1/72 palca, 1pc = 12pt. Používajú sa v print CSS a pri generovaní PDF; pre obrazovku sa typicky volí px alebo rem.
Fyzické jednotky (cm/mm/in)
Jednotky predstavujúce skutočnú fyzickú dĺžku. 1in = 2.54cm = 25.4mm = 96px (definícia CSS). Používajú sa pri potrebe zhody s tlačenými materiálmi, ale fyzická veľkosť obrazovky nie je garantovaná.
Výhody konverzie v reálnom čase
Tento nástroj podporuje konverziu v reálnom čase a okamžite aktualizuje výsledky pri zmene základných hodnôt. Umožňuje rýchle overenie vzhľadu na rôznych zariadeniach a pri rôznych nastaveniach písma.