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ů. 32 px je například 2rem při kořenu 16.
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].
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 uvádíme na čtyři desetinná místa, protože při základu 16 px je jediný pixel přesně 0,0625rem a velikosti písma 14 a 18 px dávají 0,875 a 1,125rem.
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 mohou dávat i zlomky: 18 pixelů je 1,125rem, 30 pixelů je 1,875rem a 22 pixelů je 1,375rem. Všechny tři jsou přesné, 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ů a DPI.
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 |
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. V srpnu 2026 zaznamenal registr npm více než 880 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ě[3] |
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 budeš převádět pixely na rem?
Přenos návrhu do kódu
Návrh dává 24 px mezery a styly mají dostat 1,5rem.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 velikostí textu, kterou si čtenář nastaví. Kritérium WCAG 1.4.4 žádá, aby šel text zvětšit bez ztráty obsahu a funkcí, až na 200 %[4].
Převést Pixely na jiné jednotky
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. Opačný směr, z rem na pixely, spočítá převodník rem na pixely.
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.
Kolik rem je 14 px?
0,875rem při výchozím základu 16 px. Při základu 10 px je to 1,4rem a při základu 20 px 0,7rem.
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. Při základu 10 px je to 1,2rem a při základu 20 px 0,6rem.
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.
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. 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. Mezery, které mají sledovat místní velikost písma, můžeš zapsat v em, které spočítá převodník pixelů na em.
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, vidíš chybu nebo chceš navrhnout další nástroj? Napiš nám.