Převod CSS jednotek je proces převádění mezi různými jednotkami délky (px, em, rem, %, vw, vh atd.), které se používají ve webdesignu.
Absolutní a relativní jednotky
CSS jednotky se dělí na absolutní a relativní. Absolutní jednotky (px, pt, cm atd.) mají pevnou velikost, zatímco relativní jednotky (em, rem, %, vw, vh atd.) jsou vyjádřeny jako poměr k základní hodnotě.
px (Pixel)
Nejběžnější jednotka, představuje jeden bod na obrazovce. Snadno se s ní pracuje díky pevné velikosti, ale může mít problémy s přístupností, protože ignoruje uživatelská nastavení písma.
em (Em)
Relativní jednotka založená na velikosti písma rodičovského prvku. 1em = font-size rodiče. Vnořené struktury mohou způsobit kumulativní změny velikosti.
rem (Root Em)
Relativní jednotka založená na velikosti písma kořenového elementu (html). 1rem = font-size html (obvykle 16px). Na rozdíl od em není ovlivněn vnořením a je doporučen pro moderní CSS.
% (Procento)
Udává poměr vůči rodičovskému prvku. Pro font-size je vůči rodičově font-size; pro width vůči šířce rodiče. Základ závisí na vlastnosti.
vw/vh (Viewport jednotky)
Jednotky založené na velikosti viewportu. 1vw = 1% šířky viewportu, 1vh = 1% výšky viewportu. Umožňují flexibilní rozvržení reagující na velikost obrazovky.
pt/pc (Tiskové jednotky)
Jednotky používané v tiskařském průmyslu. 1pt = 1/72 palce, 1pc = 12pt. Používají se v tiskových stylech a při generování PDF, pro obrazovku se běžně používá px nebo rem.
Fyzické jednotky (cm/mm/in)
Jednotky představující skutečnou fyzickou délku. 1in = 2.54cm = 25.4mm = 96px (CSS definice). Používají se při potřebě konzistence s tištěnými materiály, ale velikost obrazovky není zaručena.
Výhody okamžitého převodu
Tento nástroj podporuje převod v reálném čase, aktualizuje výsledky při změně základních hodnot a umožňuje rychlé ověření vzhledu pro různé velikosti obrazovky a nastavení písma.