Převeď rem na pixely s libovolnou základní velikostí
Při výchozím nastavení prohlížeče má jeden rem 16 pixelů, takže 1,5rem dá 24. Zadej hodnotu v rem, nastav základní velikost písma a přečti výsledek: základ 10 px z techniky 62,5 % funguje stejně. Okraj 2rem je 32 pixelů, když je kořen 16.
K čemu slouží převod rem na pixely?
Rem se změní na pixely jediným násobením: hodnota v rem krát základní velikost písma. Při výchozím nastavení prohlížeče má tento základ 16 px, takže 1rem dá 16 pixelů a 1,5rem dá 24. Jednotka odkazuje na velikost textu prvku html, kořene dokumentu, odtud i název root em[1].
Převod se hodí, jakmile pracuješ podle grafického návrhu. Grafik předá rozměry v pixelech, styly je uchovávají v rem a ty potřebuješ jedno číslo, abys ověřil, jestli nadpis o velikosti 1,875rem opravdu odpovídá 30 pixelům z návrhu.
Základ může mít i jinou hodnotu než 16 px. Technika 62,5 % ho nastaví na 10 px a čtenář si ho může zvýšit v nastavení prohlížeče, proto pole přijímá libovolnou hodnotu od 1 do 100.
Níže najdeš tabulku 26 hodnot při třech základech, kompletní škálu velikostí písma Tailwind CSS a vysvětlení, proč je číslo 16 jen výchozí. Opačnou cestu pokrývá převodník pixelů na rem.
Jak spočítat rem na pixely ručně? Vzorec a příklad
Vzorec obsahuje jedinou operaci: pixely = rem × základní velikost písma. Základní velikost písma je ta, kterou nese prvek html, a pokud ji nikdo nezměnil, prohlížeč použije 16 px.
Příklad s mezerou 1,25rem: při základu 16 px vyjde 1,25 × 16 = 20 pixelů. Stejná hodnota při základu 10 px dá 12,5 pixelu a u čtenáře, který si nastavil 20 px, vyroste na 25.
Technika 62,5 % spočívá v zápisu html { font-size: 62.5% }, který sníží základ na 10 px, protože 62,5 % z 16 je přesně 10. Výpočet se pak dělá zpaměti: 2,4rem je 24 pixelů. Přichází s jednou podmínkou: textu v body je nutné vrátit čitelnou velikost, třeba 1.6rem, tedy 16 pixelů, jinak celá stránka zůstane vysázená v desítkovém stupni.
Jednotka em se počítá stejně, jen odkazuje na rodičovský prvek místo na kořen dokumentu: ten výpočet obstará převodník em na pixely. Stejných 16 pixelů odpovídá 12 typografickým bodům v sazbě, což přepočítá převodník typografických jednotek.
Kolik pixelů mají běžné hodnoty v rem?
| Hodnota v rem | Základ 16 px (výchozí) | Základ 10 px (62,5 %) | Základ 20 px (zvětšený text) |
|---|---|---|---|
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
Proč je 16 px jen výchozí hodnota?
Číslo 16 pochází z prohlížeče, nikoli ze specifikace CSS. Je to velikost textu, kterou prohlížeč dokumentu přiděluje, a čtenář ji mění v nastavení svého programu. Kdo hůř vidí, může si tam nastavit 20 nebo 24 px a čeká, že se stránka přizpůsobí.
Právě v tom leží celý rozdíl mezi rem a pixelem. Prvek zapsaný jako font-size: 24px zůstane vysoký 24 pixelů bez ohledu na volbu čtenáře. Tentýž prvek zapsaný jako 1.5rem roste se základem: při 20 px dá 30 pixelů, při 24 px jich dá 36.
Kritérium WCAG 1.4.4 vyžaduje, aby šel text zvětšit až na 200 % bez ztráty obsahu a funkčnosti[2]. Rozvržení postavené na rem se škáluje spolu s velikostí textu, kterou si čtenář nastaví.
Odtud praktické rozdělení: velikosti písma, mezery a šířky sloupců v rem, a pixel tam, kde má rozměr zůstat pevný bez ohledu na text, tedy u rámečků, stínů a vlasových linek.
Odkud se berou hodnoty jako 0,875 nebo 1,875rem?
| Třída Tailwindu | Hodnota v rem | Pixely při základu 16 px | Příklad použití |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | Popisek obrázku, malý štítek |
| text-sm | 0,875 rem | 14 px | Nápověda, popisek pole |
| text-base | 1 rem | 16 px | Běžný text, referenční hodnota |
| text-lg | 1,125 rem | 18 px | Úvodní odstavec |
| text-xl | 1,25 rem | 20 px | Nadpis karty |
| text-2xl | 1,5 rem | 24 px | Nadpis sekce |
| text-3xl | 1,875 rem | 30 px | Podnadpis stránky |
| text-4xl | 2,25 rem | 36 px | Titulek stránky |
| text-5xl | 3 rem | 48 px | Nadpis v hlavičce |
| text-6xl | 3,75 rem | 60 px | Velký nadpis na širokém displeji |
| text-7xl | 4,5 rem | 72 px | Heslo na úvodní stránce |
| text-8xl | 6 rem | 96 px | Dekorativní logotyp |
| text-9xl | 8 rem | 128 px | Číslo ve statistickém bloku |
Rem a pixel vedle sebe
| Vlastnost | rem | px |
|---|---|---|
| Vztažný bod | Velikost písma prvku html | Žádný, jde o absolutní hodnotu |
| Výchozí hodnota | 1rem = 16 px | 1 px = 1/96 palce |
| Reakce na nastavení čtenáře | Škáluje se spolu s ním | Zůstává beze změny |
| Vnořené prvky | Bez vlivu, výpočet vždy vychází z kořene | Bez vlivu |
| Obvyklé použití | Velikosti písma, mezery, šířky | Rámečky, stíny, vlasové linky |
| V Tailwind CSS | Jednotka škály písma a mezer | Libovolná hodnota v hranatých závorkách |
Kdy budeš převádět rem na pixely?
Kontrola grafického návrhu
Návrh uvádí nadpis o velikosti 30 px a kód říká 1,875rem. Jedno násobení ti řekne, jestli obě čísla popisují stejnou velikost.Čtení cizích stylů
Otevřeš projekt psaný v rem a chceš vědět, kolik měří mezery. Základ 16 px promění 0,75rem ve známých 12 pixelů.Test přístupnosti
Nastav základ na 20 px a podívej se, o kolik naroste každý prvek, když si někdo zvětší text v prohlížeči.Práce s technikou 62,5 %
Při základu 10 px vycházejí hodnoty kulaté: 2,4rem je 24 pixelů. Převodník tenhle základ přijímá stejně jako výchozí.
Převést jiné jednotky na Pixely
Zdroje
- CSS Values and Units Module Level 4 — W3C
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
- font-size – Typography — Tailwind CSS
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 pixelů je 1rem?
Při výchozím nastavení prohlížeče je 1rem 16 pixelů. Číslo vychází z velikosti textu prvku html, takže po zápisu html { font-size: 62.5% } dá tentýž 1rem 10 pixelů a u čtenáře se zvětšeným textem 20 i více. Opačný směr, z pixelů na rem, spočítá převodník pixelů na rem.
Je 1rem vždy 16 px?
16 px je výchozí velikost textu prohlížeče, hodnota, kterou specifikace CSS nechává otevřenou. Čtenář ji mění v nastavení programu a autor stránky ve stylech. Proto pole základní velikosti přijímá libovolnou hodnotu od 1 do 100 px.
Kolik pixelů je 1,5rem?
24 pixelů při základu 16 px, 15 pixelů při základu 10 px a 30 pixelů při 20 px. Hodnota 1,5rem odpovídá třídě text-2xl v Tailwind CSS.
Kolik pixelů je 1,25rem?
20 pixelů při výchozím základu 16 px. Je to třída text-xl v Tailwind CSS.
Kolik pixelů je 0,875rem?
14 pixelů při základu 16 px. Hodnota odpovídá třídě text-sm v Tailwind CSS.
Kolik pixelů je 32rem?
512 pixelů při základu 16 px. Taková hodnota se hodí pro šířku sloupce nebo maximální šířku kontejneru.
Co je technika 62,5 %?
Zápis html { font-size: 62.5% } sníží základ na 10 px, protože 62,5 % z 16 je přesně 10. Výpočet se pak dělá zpaměti: 2,4rem je 24 pixelů. Textu v body je nutné vrátit čitelnou velikost, třeba 1.6rem, aby celá stránka nezůstala vysázená v desítkovém stupni. Návrat z pixelů na rem při tomto základu 10 px spočítá převodník pixelů na rem.
Jaký je rozdíl mezi rem a em?
Rem odkazuje na velikost písma prvku html a dává stejný výsledek v celém dokumentu bez ohledu na to, jak hluboko je prvek vnořený. Em odkazuje na velikost rodičovského prvku, takže se hodnoty při vnořování násobí. Velikosti písma se zapisují v rem, jehož výsledek zůstává předvídatelný. Hodnoty v em převede na pixely převodník em na pixely. Hodnotu v rem vyjádříš v em, počítaných od konkrétního rodiče, v převodníku typografických jednotek.
Používá Tailwind CSS rem?
Ano. Výchozí škála velikostí je v rem: text-base má 1rem, text-2xl má 1,5rem a text-9xl má 8rem. Škála mezer pracuje ve stejné jednotce, takže změna základu posune celé rozvržení naráz.
Kdy se hodí pixel víc než rem?
Všude tam, kde má rozměr zůstat pevný bez ohledu na velikost textu: rámečky, stíny, vlasové linky a jednotlivé grafické prvky. Velikosti písma, mezery a šířky sloupců se zapisují v rem, aby rozvržení reagovalo na nastavení čtenáře.
Jak rem ovlivňuje přístupnost?
Kritérium WCAG 1.4.4 vyžaduje, aby šel text zvětšit až na 200 % bez ztráty obsahu a funkčnosti. Rozvržení psané v rem roste s velikostí textu nastavenou v prohlížeči, zatímco hodnoty v pixelech zůstávají stejné.
Kolika rem odpovídá 1 pixel?
Při základu 16 px je jeden pixel 0,0625rem. Opačným směrem je 12 px 0,75rem a 14 px 0,875rem. 20 px je 1,25rem a 24 px 1,5rem.
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.