Převodník CSS jednotek

Převodník CSS jednotek

Vložte CSS hodnoty po jedné na řádek — 16px, 1.5rem, 12pt, 150 % — a převodník je okamžitě přepočítá. Samotné číslo se čte v jednotce zvolené v poli „Z jednotky", zatímco jednotka napsaná přímo v řádku má vždy přednost, takže v jednom seznamu klidně smícháte pixely i remy. Cíl vyberete v poli „Na jednotku", nebo zvolte „Všechny jednotky" a uvidíte celý řetězec naráz: 16px = 1rem = 12pt = 100%. Řádky, které nejsou čistou hodnotou, projdou do výstupu beze změny, takže zatoulaný komentář převod nerozbije.

Celá matematika stojí na jednom čísle: základní velikosti, tedy velikosti písma kořenového prvku v pixelech. Prohlížeče mají výchozích 16px — proto se 1rem obvykle rovná 16px a 100 % odpovídá základu. Nastavte základ na 10 pro klasický trik s 62,5 %, kdy je 1,5rem přesně 15px, nebo ho přizpůsobte vlastnímu design systému. Body určuje samotné CSS: 1px je 1/96 palce a 1pt 1/72 palce, takže 16px je přesně 12pt bez ohledu na základ. Volba desetinných míst omezí přesnost až na šest míst a koncové nuly se ořežou.

Rem je jednotka přístupnosti: škáluje se s velikostí písma, kterou si čtenář nastaví v prohlížeči, takže text v remech se zvětší, když si někdo zvýší výchozí velikost, zatímco pixely zůstanou fixní. Em tady počítá stejně, ale ve skutečném stylu se vztahuje k velikosti písma samotného prvku, takže vnořené em hodnoty se násobí, zatímco rem ne — převodník předpokládá plochý případ vůči kořenu.

Všechno běží lokálně ve vašem prohlížeči — nic se nenahrává a na nic se nečeká. Převedený seznam zkopírujete nebo stáhnete jako soubor .txt.

Časté dotazy