Preskočiť na obsah
TextArray
100% lokálne

Prevodník CSS jednotiek

Prevádzajte CSS dĺžky medzi px, rem, em, pt a % pri ľubovoľnej základnej veľkosti písma.

Vstup
Výstup
Súvisiace nástroje
Kalkulačka pomeru stránVývojárske nástroje
Konvertor fariebVývojárske nástroje
Minifikátor CSSVývojárske nástroje
Prevodník CSS jednotiek
Vložte CSS hodnoty po jednej na riadok — 16px, 1.5rem, 12pt, 150 % — a prevodník ich okamžite prepočíta. Samotné číslo sa číta v jednotke zvolenej v poli „Z jednotky", zatiaľ čo jednotka napísaná priamo v riadku má vždy prednosť, takže v jednom zozname pokojne zmiešate pixely aj remy. Cieľ vyberiete v poli „Na jednotku", alebo zvoľte „Všetky jednotky" a uvidíte celý reťazec naraz: 16px = 1rem = 12pt = 100%. Riadky, ktoré nie sú čistou hodnotou, prejdú do výstupu nezmenené, takže zatúlaný komentár prevod nepokazí.
Celá matematika stojí na jednom čísle: základnej veľkosti, čiže veľkosti písma koreňového prvku v pixeloch. Prehliadače majú predvolených 16px — preto sa 1rem zvyčajne rovná 16px a 100 % zodpovedá základu. Nastavte základ na 10 pre klasický trik so 62,5 %, pri ktorom je 1,5rem presne 15px, alebo ho prispôsobte vlastnému dizajnovému systému. Body určuje samotné CSS: 1px je 1/96 palca a 1pt 1/72 palca, takže 16px je presne 12pt bez ohľadu na základ. Voľba desatinných miest obmedzí presnosť až na šesť miest a koncové nuly sa orežú.
Rem je jednotka prístupnosti: škáluje sa s veľkosťou písma, ktorú si čitateľ nastaví v prehliadači, takže text v remoch sa zväčší, keď si niekto zvýši predvolenú veľkosť, kým pixely zostanú fixné. Em tu počíta rovnako, no v skutočnom štýle sa vzťahuje na veľkosť písma samotného prvku, takže vnorené em hodnoty sa násobia, kým rem nie — prevodník predpokladá plochý prípad voči koreňu.
Všetko beží lokálne vo vašom prehliadači — nič sa nenahráva a na nič sa nečaká. Prevedený zoznam skopírujete alebo stiahnete ako .txt súbor.
Časté otázky
Prečo používať rem namiesto px?
Hodnoty v remoch sa škálujú s veľkosťou písma, ktorú si čitateľ nastaví v prehliadači, takže ľudia, ktorí potrebujú väčší text, ho naozaj dostanú. Pixely toto nastavenie ignorujú. Prevod dizajnu z px na rem je jedno z najlacnejších vylepšení prístupnosti.
Čo je základná veľkosť a prečo je predvolená 16?
Je to veľkosť písma koreňového prvku v pixeloch — to, na čo sa vzťahuje 1rem, 1em aj 100 %. Každý veľký prehliadač má predvolených 16px, takže 16 je správny základ, pokiaľ váš štýl koreň nemení — napríklad html { font-size: 62.5% } robí základ 10.
Aký je rozdiel medzi em a rem?
Rem sa vždy vzťahuje na veľkosť písma koreňa; em na aktuálny prvok, takže vnorené em hodnoty sa násobia. Tento prevodník počíta obe voči jednej základnej veľkosti — plochý prípad. V hlboko vnorenom kóde sa skutočné em hodnoty môžu líšiť.
Čo sa stane s riadkami, ktoré nie sú hodnotami?
Prejdú do výstupu nezmenené a prehľad ich započíta ako preskočené. Prevádzajú sa len čisté hodnoty ako 16px, 1.5rem alebo samotné číslo — celé CSS deklarácie nástroj nespracúva.
Nahráva sa môj text niekam?
Nie. Nástroj beží výhradne vo vašom prehliadači a vstup nikdy neopustí vaše zariadenie.