Pixely na REM
Převeďte hodnoty pixelů na rem pro moderní rozvržení CSS. rem měřítko s velikostí kořenového písma uživatele — lepší pro přístupnost než pevné px. Výchozí kořen prohlížeče je často 16 px, takže 24 px = 1,5 rem, pokud projekt nepřepíše html { font-size }.
Pixely
Velikost písma root (px)
Výsledek
1rem
Jak převést px na rem
1. Zadejte hodnotu pixelu z vašeho návrhu (např. 32 px).
2. Nastavte velikost kořenového písma (výchozí 16 px, pokud se nezmění).
3. Zkopírujte výsledek rem do své šablony stylů.
4. Pro velikosti písma, mezery a měřítko komponent použijte rem; px pro ohraničení vlasové linie v případě potřeby.
Px to rem příklady
Typ těla a nadpisu
16 px = 1 rem (výchozí). 24 px = 1,5 rem nadpisu. 14 px = 0,875 rem malého textu.
Vlastní kořen 10 px (systémy návrhu)
Některé týmy nastavují html { velikost písma: 62,5 % }, takže 1 rem = 10 px. Pak 32 px design token = 3,2 rem.
Měřítko mezery
8 px mřížka → 0,5 rem na 16 px kořen. 16 px padding = 1 rem; konzistentní rytmus ve stupnicích podobných Tailwindu.
Kdy převést px na rem
• Když implementujete specifikace Figma v responzivním CSS s přístupným zoomem.
• Když zarovnáte tokeny návrhového systému definované v rem.
• Když uživatelé přepíší výchozí velikost písma prohlížeče — rozvržení rem se přizpůsobí.
Kdy zvolit něco jiného
• Když potřebujete em vzhledem k vnořenému komponentnímu fontu — použijte k em pixely.
• Když potřebujete jednotky výřezu (vw/vh) pro rozvržení na celou obrazovku.
• Když shodíte 1:1 pixely zařízení na okrajích sítnice — 1px okraje často zůstanou v px.
rem vs em v komponentě CSS
em se skládá uvnitř vnořených prvků s různými velikostmi písma — výplň v em roste s místním textem. rem zůstává svázán s kořenem a poskytuje předvídatelné rozestupy mezi komponentami. Mnoho týmů používá rem pro měřítko rozvržení a em pouze pro mezery mezi písmeny nebo mikroúpravy vázané na místní typ.
Pracovní postup předání návrhu
Návrháři exportují px z Figma; vývojáři rozdělili podle dohodnutého kořene (dokument v README). Když projekt používá 62,5% trik, potvrďte před převodem — smícháním předpokladů se uživatelské rozhraní zdvojnásobí nebo zmenší na polovinu.
Časté dotazy
Co je rem?
rem = "root em". 1 rem se rovná velikosti písma prvku html, nikoli nadřazeného prvku.
Proč nepoužívat px všude?
Pevný pixel ignoruje uživatelské předvolby písem. rem respektuje kořenové škálování pro přístupnost (WCAG).
Výchozí velikost kořenového písma?
Většina prohlížečů má výchozí 16 px na html. Uživatelé to mohou změnit v nastavení.
Vzorec?
rem = px ÷ rootFontSizePx. Příklad: 20 px ÷ 16 = 1,25 rem.
Funguje rem pro okraje a odsazení?
Ano — rem se vztahuje na jakoukoli vlastnost délky CSS, nejen na velikost písma.
Jsou data nahraná?
Ne. Převod probíhá lokálně.