Převeď pixely na rem s libovolnou základní velikostí
Při výchozím nastavení prohlížeče je 24 pixelů 1,5rem a 14 pixelů 0,875rem. Zadej rozměr z grafického návrhu, nastav základní velikost písma a výsledek přenes rovnou do stylů.
K čemu slouží převod pixelů na rem?
Pixel se změní na rem jediným dělením: počet pixelů dělený základní velikostí písma. Při výchozím nastavení prohlížeče má tento základ 16 px, takže 24 pixelů dá 1,5rem a 14 pixelů dá 0,875rem. Jednotka rem odkazuje na velikost textu prvku html, kořene dokumentu [1].
Tenhle směr je v každodenní práci nejčastější. Grafický návrh přichází s rozměry v pixelech, protože tak počítají grafické programy, a styly se píšou v rem, aby rozvržení reagovalo na nastavení čtenáře.
Výsledek nese čtyři desetinná místa, protože při základu 16 px je jediný pixel přesně 0,0625rem a velikosti písma dávají čísla jako 0,875 nebo 1,125.
Níže najdeš tabulku 30 hodnot při třech základech, návod, jak převod zautomatizovat uvnitř projektu, a přehled vlastností CSS s odpovědí, které převádět na rem. Opačnou cestu pokrývá převodník rem na pixely.
Jak spočítat pixely na rem ručně? Vzorec a příklad
Vzorec obsahuje jedinou operaci: rem = pixely ÷ základní velikost písma. Jde o obrácené násobení, kterým se rem mění na pixely.
Příklad s mezerou 20 px: při základu 16 vyjde 20 ÷ 16 = 1,25rem. Stejná hodnota při základu 10 px z techniky 62,5 % dá 2rem, protože dělení deseti zvládneš zpaměti.
Rozměry z grafického návrhu často dávají zlomky: 18 pixelů je 1,125rem, 30 pixelů je 1,875rem a 22 pixelů je 1,375rem. Všechny tři jsou přesné a většina design systémů je takto ukládá, takže je zapíšeš do stylů tak, jak jsou.
Jednotka em se počítá stejně, jen se dělí velikostí písma rodičovského prvku místo velikostí kořene: ten výpočet obstará převodník pixelů na em. Pokud rozměr míří na papír, tentýž soubor vyřeší převodník pixelů na palce.
Kolik rem mají běžné hodnoty v pixelech?
| Hodnota v pixelech | Základ 16 px (výchozí) | Základ 10 px (62,5 %) | Základ 20 px (zvětšený text) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Tři základy pokrývají tři situace: 16 px je výchozí nastavení prohlížeče, 10 px pochází z techniky 62,5 % a 20 px je typické číslo u člověka, který si text zvětšil v nastavení.
Jak převádět pixely na rem automaticky v projektu?
Pro jednotlivou hodnotu stačí převodník výše. Pro celé styly přechází výpočet na nástroj, který ho spustí při každém sestavení projektu.
V preprocesoru napíšeš funkci, která číslo vydělí základem. V Sassu vypadá takto: @function rem($px) { @return math.div($px, 16) * 1rem; } a v pravidle pak zapíšeš padding: rem(24) a dostaneš 1.5rem. Základ pak žije na jediném místě a mění se jednou.
Druhá cesta pracuje nad hotovými styly a nechává tvůj způsob zápisu beze změny. Zásuvný modul postcss-pxtorem zapojený do kroku sestavení projde výstupní soubor a vymění pixely za rem podle nastaveného základu. Za posledních 30 dní zaznamenal registr npm více než 870 000 jeho stažení [2].
Třetí cestou jsou proměnné CSS. Do stylů jednou zapíšeš --space-6: 1.5rem a potom se odkazuješ na název místo na číslo. Převod se tak provede jedinkrát, při definici škály, a ne v každém pravidle.
Které vlastnosti převést na rem a které nechat v pixelech?
| Vlastnost CSS | Převést na rem? | Proč |
|---|---|---|
| font-size | Ano | Jádro celé věci: velikost textu má reagovat na nastavení prohlížeče |
| padding a margin | Ano | Prostor kolem textu má růst spolu s ním, jinak zůstane při větším stupni těsný |
| šířka textového sloupce | Ano | Délka řádku se měří ve znacích, takže šířka následuje velikost písma |
| line-height | Ne, bez jednotky | Holý násobitel jako 1.5 se správně dědí v jakémkoli vnoření |
| border-width | Ne | Vlasová linka má zůstat vlasovou linkou bez ohledu na velikost textu |
| box-shadow | Ne | Stín je grafický efekt bez vazby na velikost textu |
| border-radius | Obvykle ne | Poloměr popisuje tvar prvku, ne jeho obsah |
| zlomové body media queries | Ano, ale v em | Uvnitř media query počítá prohlížeč od výchozí velikosti textu, a ne od prvku html, takže se em chová předvídatelně <a class="source-ref" href="#zrodlo-3">[3]</a> |
Přepis stávajících stylů nenutí převádět všechno. Výměna pixelů za rem se vyplatí tam, kde má rozměr růst spolu s textem čtenáře.
Pixel a rem vedle sebe
| Vlastnost | px | rem |
|---|---|---|
| Vztažný bod | Žádný, jde o absolutní hodnotu | Velikost písma prvku html |
| Výchozí hodnota | 1 px = 1/96 palce | 1rem = 16 px |
| Reakce na nastavení čtenáře | Zůstává beze změny | Škáluje se spolu s ním |
| Kde se uvádí | Grafické návrhy, grafické programy, obrazové soubory | Styly, design systémy |
| Obvyklé použití | Rámečky, stíny, vlasové linky | Velikosti písma, mezery, šířky |
| Automatizace | Hodnota zapsaná přímo | Funkce v preprocesoru nebo modul při sestavení |
Kdy se ti tenhle převod bude hodit?
Přenos návrhu do kódu
Návrh dává 24 px mezery a styly mají dostat 1,5rem. Je to nejčastější cesta v každodenní práci na rozhraní.Nastavení škály projektu
Místo převádění v každém pravidle definuješ jednou proměnné CSS nebo funkci v preprocesoru a odkazuješ se na názvy.Přepis starých stylů
Při migraci z pixelů na rem převádíš velikosti písma a mezery, zatímco rámečky a stíny zůstávají tak, jak jsou.Kontrola přístupnosti
Hodnoty psané v rem rostou s nastavením čtenáře, což je přesně to, co žádá kritérium WCAG 1.4.4 o zvětšení textu na 200 % [4].
Převést Pixely na jiné jednotky
Další převodníky jednotek
Zdroje
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.
Poslední revize obsahu: · napsal a zkontroloval tým Arteon
Časté otázky
Kolik rem je 1 pixel?
Při výchozím základu 16 px je jeden pixel 0,0625rem. Při základu 10 px z techniky 62,5 % dá tentýž pixel 0,1rem a při textu zvětšeném na 20 px dá 0,05rem.
Jak převést px na rem?
Vyděl počet pixelů základní velikostí písma. Při výchozích 16 px vyjde 24 ÷ 16 = 1,5rem. Převodník výše provede tohle dělení pro libovolný základ od 1 do 100 px.
Kolik rem je 24 px?
1,5rem při základu 16 px, 2,4rem při základu 10 px a 1,2rem při základu 20 px. Hodnota 1,5rem je běžnou velikostí nadpisu sekce.
Kolik rem je 14 px?
0,875rem při výchozím základu 16 px. Tuhle hodnotu nesou popisky formulářových polí a nápověda pod nimi.
Kolik rem je 20 px?
1,25rem při základu 16 px. Při základu 10 px vyjdou kulaté 2rem, což mluví ve prospěch techniky 62,5 % v projektech se širokou škálou mezer.
Kolik rem je 12 px?
0,75rem při základu 16 px. Je to nejmenší velikost písma v běžném použití v rozhraních: níž se čtení stává nepohodlným.
Kolik rem je 40 px?
2,5rem při základu 16 px, 4rem při základu 10 px a 2rem při základu 20 px. Hodnoty tohoto řádu popisují mezery mezi sekcemi, nikoli velikosti písma.
Kolik rem je 80 px?
5rem při výchozím základu 16 px. Při základu 10 px vyjde 8rem a při 20 px vyjdou 4rem.
Je nutné výsledek v rem zaokrouhlovat?
Hodnoty jako 0,875 nebo 1,875rem se zapisují tak, jak jsou, a takto je ukládá většina design systémů. Prohlížeč je počítá přesně, zatímco zaokrouhlení na 0,88rem by posunulo velikost písma o zlomek pixelu.
Jak převádět pixely na rem automaticky?
V preprocesoru napíšeš funkci, která dělí základem, a pak místo čísla zapíšeš rem(24). Nad hotovými styly to obstará zásuvný modul postcss-pxtorem v kroku sestavení. Třetí cestou jsou proměnné CSS s jednou definovanou škálou.
Je nutné převést na rem celé styly?
Velikosti písma, mezery a šířky sloupců ano, protože mají růst s nastavením čtenáře. Rámečky, stíny a vlasové linky zůstávají v pixelech a výška řádku se zapisuje bez jednotky, jako prostý násobitel.
Která jednotka se hodí do media queries?
Em. Uvnitř media query vyhodnocuje prohlížeč relativní jednotky vůči výchozí velikosti textu, a ne vůči hodnotě nastavené na prvku html, takže se zlomový bod zapsaný v em chová předvídatelně i v projektu s technikou 62,5 %.
Pomoz nám vylepšit naše nástroje
Máš nápad na funkci, našel jsi chybu nebo chceš navrhnout další nástroj? Napiš nám, odpovídáme do 24 hodin.