Pixel ↔ REM / EM Kalkulátor
Převeď pixely na rem nebo em a zpět. Nastav základní velikost fontu a okamžitě vidíš výsledek pro všechny časté hodnoty.
Základní nastavení
html { font-size: 16px })
PX → REM
REM → PX
Přehledová tabulka
| PX | REM | Použití |
|---|
Spravuješ živnost nebo zakázky?
Spravuješ živnost nebo zakázky? VšeVKapse — fakturace, zakázky, klientský portál a AI v jedné aplikaci. Česky.
K čemu je Pixel ↔ REM / EM
Tohle ocení každý, kdo píše CSS a nechce se při každé hodnotě zasekávat u kalkulačky nebo vzorečků v hlavě. Ať už jsi freelancer, který staví weby na zakázku, nebo frontend dev ve firmě, převod pixelů na relativní jednotky je denní rutina — a zbytečně zdržuje.
Problém je prostý: prohlížeče a designéři mluví v pixelech, ale moderní CSS chce `rem` nebo `em` kvůli přístupnosti a responzivitě. Pokud uživatel změní výchozí velikost písma v prohlížeči, pevné pixely to ignorují — `rem` respektuje. Vzorec není složitý (px ÷ base = rem), ale dělat to ručně pro dvacet hodnot za den je otravné.
Tento nástroj ti nechá zadat vlastní base font size (nejčastěji 16px, ale třeba máš 10px pro snazší počítání) a okamžitě zobrazí výsledky v obou směrech. Žádná registrace, žádné reklamy v cestě.
Co dostaneš
- Převod px → rem a px → em v reálném čase při psaní
- Nastavitelná base font size (výchozí 16px, ale změníš na cokoliv)
- Obousměrný převod — funguje i rem → px, když dostaneš cizí kód a potřebuješ vědět, co to je
- Přehledný výsledek připravený ke kopírování rovnou do stylesheetu
- Pochopení rozdílu mezi `rem` (relativní k root elementu) a `em` (relativní k rodiči)
Jak to funguje
- Nastav svůj base font size — pokud projekt používá výchozích 16px, nic neměníš.
- Zadej hodnotu v pixelech, kterou chceš převést.
- Nástroj okamžitě zobrazí ekvivalent v `rem` i `em`.
- Chceš to opačně? Přepni směr a vlož rem/em hodnotu — dostaneš zpět pixely.
- Výsledek zkopíruješ a vložíš přímo do CSS.
Časté otázky
Jaký je rozdíl mezi rem a em?
`rem` je vždy relativní k `font-size` root elementu (`<html>`), takže je předvídatelný napříč celým projektem. `em` se vztahuje k font-size nejbližšího rodiče — užitečné v komponentách, ale snadno se „nasčítá" při vnořených elementech.
Proč nepoužívat px napřímo?
Pixely ignorují uživatelovo nastavení velikosti písma v prohlížeči. Přístupnostní standardy (WCAG) doporučují relativní jednotky, aby si uživatelé s horším zrakem mohli text zvětšit bez rozbitého layoutu.
Mám nastavit base 16px nebo 10px?
16px je prohlížečový výchozí standard. Někteří vývojáři nastavují `html { font-size: 62.5% }` (= 10px) pro snazší počítání, ale tím komplikují přístupnost. Je to na tobě — nástroj funguje s oběma.
Hodí se i na spacing a rozměry, nebo jen na písmo?
Klidně ho použij na padding, margin, width nebo gap. Hodnoty v `rem` dávají smysl u jakékoliv CSS vlastnosti, nejen typografie. Na systematické typografické škály se pak hodí Typography Scale Generátor.