Co nástroj dělá a pro koho je
Převodník px na rem a em počítá mezi třemi jednotkami délky používanými v CSS: pixely (px), rem a em. Stačí zadat hodnotu do libovolného ze tří polí a zbývající dvě se dopočítají automaticky – nemusíte přepínat směr převodu ani nic potvrzovat. Navíc si můžete nastavit vlastní výchozí velikost písma (root) a vlastní kontextovou velikost písma pro em, takže výsledky odpovídají konkrétnímu CSS, se kterým pracujete, ne jen výchozímu prohlížečovému nastavení.
Hodí se, když potřebujete převést pevné pixelové hodnoty na relativní jednotky rem nebo em kvůli responzivnímu designu, když chcete vidět, jak různá výchozí velikost písma mění výsledné hodnoty v rem, když počítáte em vzhledem k velikosti písma konkrétního prvku, nebo když si chcete ověřit, že se vaše rozměry správně přizpůsobí, pokud si čtenář v prohlížeči změní výchozí velikost písma.
Jak zadat hodnoty a co se přepočítává
Pole pro zadání hodnot se v rozhraní jmenuje „Hodnoty". Podle nápovědy u něj: „Zadejte hodnotu v px, rem nebo em – zbývající dvě se při psaní automaticky dopočítají." Znamená to, že úpravou kteréhokoli z polí px, rem nebo em se ihned, během psaní, přepočítají zbylá dvě – výsledek popisuje hlášení „Převedeno napříč všemi třemi jednotkami."
Při prvním otevření nástroje platí vztah 16px = 1rem = 1em, protože výchozí velikost písma (root) i kontextová velikost písma pro em jsou obě nastavené na 16px. Jakmile jednu z nich změníte, přepočet se řídí novou hodnotou.
Výchozí velikost písma (root) a její vliv na rem
Pole „Výchozí velikost písma (root px)" určuje, s jakou základní velikostí písma stránky nástroj počítá jednotky rem. Výchozí hodnota je 16px. Například při základu 16px odpovídá 24px hodnotě 1,5rem (24 ÷ 16 = 1,5). Pokud základní velikost písma změníte na 20px, stejných 24px už odpovídá 1,2rem (24 ÷ 20 = 1,2) – přepočet rem se vždy odvíjí od hodnoty, kterou v tomto poli právě máte nastavenou.
Toto pole musí obsahovat číslo větší než 0 – jinak se zobrazí chybová hláška, viz níže.
Kontext velikosti písma pro em
Jednotka em se na rozdíl od rem nepočítá vůči kořenové velikosti písma stránky, ale vůči velikosti písma konkrétního prvku. Proto má nástroj samostatné pole „velikost písma kontextu em (px)", kam zadáte velikost písma toho prvku, pro který em počítáte. Výchozí hodnota je 16px.
Příklad: má-li prvek velikost písma 20px a vy do něj chcete zadat odsazení 10px v em, výsledek je 0,5em (10 ÷ 20 = 0,5). Pokud kontext em ponecháte na 16px a prvek má skutečně velikost písma 16px, hodnoty rem a em budou stejné – to je i výchozí stav při otevření nástroje. I toto pole musí obsahovat číslo větší než 0.
Tabulka běžných převodů a záporné hodnoty
Pod poli s hodnotami najdete tabulku „Běžné převody px → rem (základ 16px)" – rychlý přehled toho, jak se běžné pixelové hodnoty převádí na rem při výchozím základu 16px, aniž byste museli cokoli zadávat. Pokud vaše CSS používá jiný základ než 16px, upravte pole výchozí velikosti písma (root) výše a vaše zadaná hodnota se přepočítá podle nového základu; samotná tabulka zůstává orientační pomůckou pro nejběžnější základ 16px.
Do pole pro px hodnoty lze zadat i záporné číslo, takže nástroj počítá i se zápornými pixelovými hodnotami – to se hodí například u záporných okrajů (margin) v CSS.
Chybové hlášky a zpracování dat
Když do pole „Hodnoty" zadáte něco, co není platné číslo, zobrazí se hláška „Zadejte číslo pro převod." Když je neplatná výchozí velikost písma (root), objeví se hláška „Výchozí velikost písma (root) musí být číslo větší než 0." A když je neplatná velikost písma kontextu em, nástroj zobrazí „Velikost písma kontextu em musí být číslo větší než 0."
Co se zpracování týče: každý převod probíhá přímo ve vašem prohlížeči. Nic z toho, co do nástroje zadáte, se neodesílá na servery BroBroGo.
Časté dotazy
Jaký je rozdíl mezi px, rem a em? px je pevná délka. rem se měří vůči výchozí velikosti písma stránky (root), takže při základu 16px se 1rem rovná 16px. em se měří vůči velikosti písma prvku, ve kterém se nachází. Nastavení velikosti písma a rozestupů v rem umožňuje, aby se vše přizpůsobilo, když si čtenář změní výchozí velikost písma v prohlížeči.
Proč je zde samostatná velikost kontextu em? Jednotka em se vztahuje k velikosti písma vlastního prvku, což nemusí být vždy root. Chcete-li em správně spočítat, nastavte kontext em na velikost písma daného prvku. Pokud se obě velikosti shodují, ponechte ji stejnou jako root.
Co když moje výchozí velikost písma (root) není 16px? Změňte pole výchozí velikosti písma (root) tak, aby odpovídalo vašemu CSS, a každá hodnota rem se okamžitě aktualizuje. Rychlá tabulka níže slouží jako praktický průvodce pro běžný základ 16px, se kterým většina webů začíná.