Jak použít
- Do pole „Základní velikost písma“ zadejte velikost písma elementu html v px.
- V části „Možnosti“ vyberte u „Přesnost“ počet desetinných míst od 0 do 6.
- Pro převod CSS nastavte „Směr“ na „px → rem“ nebo „rem → px“.
- Na záložce CSS vložte svůj kód do pole „Vaše CSS“. U vstupů nad 200 KB klikněte na „Převést CSS“ nebo stiskněte Ctrl+Enter či Cmd+Enter.
Příklady
Velikost textu z rem zpět na px
1.25rem
20px (1.25rem × 16px)
Odsazení tlačítka se zachováním tenkého rámečku
.tlacitko {
padding: 12px 24px;
border: 1px solid #333;
}.tlacitko {
padding: 0.75rem 1.5rem;
border: 1px solid #333;
}Převod pouze vlastností písma
.nadpis {
font-size: 28px;
line-height: 36px;
margin-bottom: 16px;
}.nadpis {
font-size: 1.75rem;
line-height: 2.25rem;
margin-bottom: 16px;
}Tipy
- Převedený soubor uklidíte nástrojem Formátování CSS.
- Zmenšete ho nástrojem Minifikace CSS.
Časté dotazy
Jak se počítá převod px na rem?
Hodnotu v px vydělte základní velikostí písma elementu html. Při základu 16 px tedy 24 px odpovídá 1.5rem; opačně hodnotu v rem základem vynásobte.
Jaký je rozdíl mezi převodem na rem a em?
Rem se počítá z velikosti písma elementu html, em z velikosti písma rodičovského elementu. Proto nástroj používá dvě pole: „Základní velikost písma“ pro rem a „Velikost písma rodiče pro em“ pro em. Jednotlivé hodnoty můžete převádět v obou jednotkách, ale v kódu CSS se hodnoty em nemění.
Převádějí se i hodnoty v media queries?
Pouze když zapnete „Převádět media queries“; volba zahrnuje také parametry @container. U media queries se rem řídí výchozí velikostí písma prohlížeče, ne velikostí nastavenou pro element html.
Na co si dát pozor při převodu calc()?
Převod mění také 0px na bezrozměrné 0, a to i uvnitř calc(). Výraz calc(0px + 10px) tak po převodu nebude platný, protože sčítá číslo s délkou.
Odesílá se moje CSS na server?
Převod probíhá ve vašem prohlížeči; hodnoty ani CSS se neodesílají a neukládají. V prohlížeči se ukládá jen nastavení a poslední záložka; analytika dostává události použití bez obsahu hodnot či CSS.