Jak používat
- Nastavte velikost kořenového písma, pokud ji váš web mění (například html { font-size: 62.5% } znamená 10px).
- Zadejte hodnotu do libovolného pole a převeďte px na rem nebo rem na px. Pokud velikost odvozujete od nadřazeného prvku, přepněte na em.
- Tabulku použijte k rychlému vyhledání, nebo vložte část CSS a převeďte všechny délky v px najednou a zkopírujte výsledek.
Jak to funguje
rem = px ÷ velikost kořenového písma. Při výchozí kořenové velikosti 16px je 24px rovno 1.5rem a 14px rovno 0.875rem. em používá stejný vzorec, ale s velikostí písma nadřazeného prvku, proto se vnořené hodnoty em násobí; rem se tomu vyhýbá, protože vždy odkazuje na kořen.
Použití rem pro velikosti písma a rozestupy umožní, aby se text zvětšil, když uživatel v nastavení prohlížeče zvýší výchozí velikost písma, což pomáhá lidem se slabým zrakem. Hodnoty se zaokrouhlují na čtyři desetinná místa.
Převaděč úryvků mění čísla následovaná px. Komentáře, url(…) a řetězce v uvozovkách ponechává beze změny; hodnotu 1px ponechá, pokud si to přejete (tenké rámečky by obvykle měly zůstat 1px); 0px zapisuje jako 0 a ve výchozím nastavení ponechává podmínky @media a @container, protože v dotazech na média rem a em vždy odkazují na počáteční velikost písma prohlížeče bez ohledu na velikost kořenového písma, kterou nastavíte. Nechápe sémantiku calc() nad rámec nahrazení čísel px uvnitř, což je stále správné, protože každá délka se převádí samostatně.
Příklady
Výchozí kořenová velikost
Při kořenové velikosti 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Trik s 62.5%
Pokud váš CSS nastaví html { font-size: 62.5% }, je kořenová velikost 10px, takže 14px = 1.4rem a 24px = 2.4rem. Nastavte pole kořenové velikosti písma na 10, aby to odpovídalo.
Převod komponenty
padding: 24px 16px; border: 1px solid #ddd; se změní na padding: 1.5rem 1rem; border: 1px solid #ddd; se zapnutou volbou „Zachovat hodnoty 1px“.
Časté dotazy
Mám používat rem, nebo em?
rem používejte pro většinu velikostí písma, rozestupů a rozvržení, protože je předvídatelné všude. em používejte, když se má něco škálovat s velikostí textu vlastní komponenty, například vnitřní odsazení tlačítka.
Proč nepřevádět media queries na rem?
Můžete, ale v media query 1rem vždy odpovídá výchozí velikosti písma prohlížeče (obvykle 16px), nikoli vaší html font-size. Převaděč je proto ve výchozím nastavení přeskakuje; pokud přesto dělíte 16, vypněte tuto možnost.
Je rem lepší pro přístupnost než px?
Pro velikosti písma ano: rem respektuje výchozí nastavení velikosti písma uživatele, zatímco velikosti písma v px jej ignorují. Přiblížení prohlížeče funguje s oběma jednotkami.
Soukromí
Převody i vložený kód CSS se zpracovávají ve vašem prohlížeči a nikam se neodesílají.