Čo prevodník px na rem a em robí
Tento nástroj prepočítava hodnotu zadanú v pixeloch (px) na rem a em, a rovnako aj opačným smerom. Stačí zadať číslo do ktoréhokoľvek z troch polí – zvyšné dve sa prepočítajú samy. Rozhranie to opisuje priamo: „Zadajte hodnotu v px, rem alebo em – ostatné dve sa počas písania automaticky aktualizujú.“ Okrem samotného prevodu môžete nastaviť aj vlastnú základnú veľkosť písma (root) a kontextovú veľkosť písma pre em, aby výsledné hodnoty presne zodpovedali vášmu konkrétnemu CSS. Celý výpočet prebieha priamo vo vašom prehliadači – nič z toho, čo do polí zadáte, sa neodosiela na BroBroGo.
Rozdiel medzi px, rem a em v tomto prevodníku
Pole „Hodnoty“ prijíma dĺžku v ktorejkoľvek z troch jednotiek. Na začiatku, kým nezmeníte žiadne nastavenie, platí, že 16px sa rovná 1rem a zároveň 1em – je to počiatočný stav nástroja. Rem sa počíta voči poľu „Základná veľkosť písma (root) v px“, zatiaľ čo em sa počíta voči samostatnému poľu „veľkosť písma kontextu em (px)“. Keď zmeníte jedno z týchto dvoch polí, zmení sa aj to, koľko pixelov zodpovedá 1rem, respektíve 1em – a všetky prepočítané hodnoty sa okamžite aktualizujú.
Základná veľkosť písma (root) a jej vplyv na rem
Pole „Základná veľkosť písma (root) v px“ je predvolene nastavené na 16px. Keďže rem sa počíta práve voči tejto hodnote, jej zmena ovplyvní každý výsledok v rem. Napríklad pri predvolenom základe 16px zodpovedá 24px hodnote 1,5rem (24 ÷ 16 = 1,5). Ak základnú veľkosť zmeníte na 20px, tých istých 24px už zodpovedá 1,2rem (24 ÷ 20 = 1,2) – rovnaký počet pixelov teda pri inom základe dáva inú rem hodnotu. Pole musí obsahovať číslo väčšie ako 0; pri nesprávnej hodnote sa zobrazí hlásenie „Základná veľkosť písma (root) musí byť číslo väčšie ako 0.“
Kontextová veľkosť písma pre jednotku em
Em sa neriadi základnou veľkosťou písma stránky, ale veľkosťou písma konkrétneho prvku, s ktorým pracujete. Na to slúži pole „veľkosť písma kontextu em (px)“, ktoré je tiež predvolene 16px. Ak napríklad nastavíte kontext na 20px, hodnota 30px zodpovedá 1,5em (30 ÷ 20 = 1,5). Ak sa kontextová veľkosť prvku zhoduje so základnou veľkosťou stránky, ponechajte obe polia rovnaké. Aj toto pole musí byť číslo väčšie ako 0 – inak sa zobrazí hlásenie „Veľkosť písma kontextu em musí byť číslo väčšie ako 0.“
Tabuľka bežných prevodov px → rem
Nástroj zobrazuje aj tabuľku „Bežné prevody px → rem (základ 16px)“, ktorá ukazuje prevod bežných pixelových hodnôt na rem pri základnej veľkosti 16px – bez ohľadu na to, akú základnú veľkosť ste práve nastavili vo vlastnom poli vyššie. Táto tabuľka teda slúži ako rýchla referencia pre najčastejší prípad, keď stránka používa 16px základ: napríklad 8px zodpovedá 0,5rem, 16px zodpovedá 1rem, 24px zodpovedá 1,5rem a 32px zodpovedá 2rem.
Pre koho je tento prevodník užitočný
Nástroj sa hodí, ak potrebujete previesť pevné pixelové hodnoty na relatívne jednotky rem alebo em pri responzívnom dizajne, alebo ak si chcete overiť, ako rôzna základná veľkosť písma ovplyvní výsledné rem hodnoty. Rovnako poslúži, ak potrebujete vypočítať em hodnotu vzhľadom na veľkosť písma konkrétneho prvku, alebo ak chcete zabezpečiť, aby sa vaše rozmery správne škálovali, keď si čitateľ zmení predvolenú veľkosť písma.
Práca s poľami a chybové hlásenia
Pri úprave ktoréhokoľvek z polí px, rem alebo em sa zvyšné dve prepočítajú priebežne, počas písania. Do poľa pre pixely môžete zadať aj zápornú hodnotu. Ak do poľa „Hodnoty“ zadáte niečo, čo nie je platné číslo, zobrazí sa hlásenie „Zadajte číslo na konverziu.“ Polia pre základnú veľkosť písma a kontextovú veľkosť písma pre em vyžadujú kladné číslo väčšie ako 0 – v opačnom prípade sa zobrazia príslušné chybové hlásenia uvedené vyššie.
Časté otázky
Aktualizujú sa hodnoty px, rem a em automaticky? Áno. Keď upravíte ktorékoľvek z týchto troch polí, zvyšné dve sa prepočítajú za chodu, počas písania.
Prečo mám nastaviť vlastnú základnú veľkosť písma, keď je predvolene 16px? Ak vaše CSS používa iný základ ako 16px, zmena poľa „Základná veľkosť písma (root) v px“ zabezpečí, že vypočítané hodnoty rem budú zodpovedať vášmu skutočnému nastaveniu, nie predvolenej hodnote nástroja.
Môžem zadať zápornú hodnotu v pixeloch? Áno, nástroj záporné pixelové hodnoty umožňuje.
Odosiela nástroj zadané hodnoty niekam mimo môjho prehliadača? Nie. Každá konverzia prebieha vo vašom prehliadači a nič z toho, čo zadáte, sa neodosiela na BroBroGo.