Přeskočit na hlavní obsah
LibraTool logoLibraTool

Převodník pixelů na REM zdarma

Převádějte mezi px, rem, em, pt, vw, vh a % s konfigurovatelnou základní velikostí písma. Zahrnuje referenční tabulku pro běžné velikosti pixelů.

Funguje offline po načtení
1rem

Kontext (ovlivňuje rem/em/vw/vh/%)

Všechny převody pro 16 px

Nejbližší Tailwind tokeny (na 16px root)

Běžné velikosti v pixelech → rem (při základu 16px)

Převést vložené CSS

Běžná použití

  • PX do REM pro vývoj webuPřeveďte hodnoty pixelů na jednotky rem pro škálovatelné, přístupné CSS. Nastavte základní velikost písma a okamžitě vidět všechny ekvivalentní hodnoty.
  • CSS jednotky pro responzivní designPřeveďte mezi px, vw, vh a % pro vytváření rozvržení, které správně reagují na různé velikosti a orientace obrazovky.
  • Převeďte specifikace návrhu na jednotky CSSPřekládejte hodnoty pixelů Figma nebo Sketch na jednotky rem/em pro čistou, škálovatelnou implementaci CSS.
  • Tailwind CSS jednotka referencePochopte, jak se třídy velikostí Tailwind CSS mapují na pixel a rem hodnoty pro přesnou implementaci.
  • Převeďte jednotky CSS pro tiskovací šablony stylůPřeveďte mezi px, pt a rem pro tiskové mediální dotazy a výstup CSS PDF.

Jak to funguje

Všechny převody běží zcela ve vašem prohlížeči pomocí ručně napsaného aritmetického enginu bez závislostí. Nástroj převádí mezi sedmi jednotkami CSS (px, rem, em, pt, vw, vh a %) tak, že každý výpočet vede přes pixely jako společný základ a aplikuje jednoduché dělení nebo násobení proti vámi nastavené velikosti kořenového písma, velikosti písma rodiče nebo rozměrům viewportu.

  1. 1
    Nastavte hodnoty kontextu
    Před převodem nastavíte čtyři čísla, která dávají relativním jednotkám CSS smysl: velikost kořenového písma (výchozí 16px, výchozí hodnota prohlížeče), velikost písma rodičovského prvku (pro převody em a %) a šířku a výšku viewportu (pro vw a vh). Jsou to stejné hodnoty, které by váš prohlížeč použil při vyhodnocování CSS za běhu.
  2. 2
    Pixel jako univerzální mezikrok
    Převodník nejprve volá toPixels() pro normalizaci vašeho vstupu na surový počet pixelů — například 1,5rem se stane 1,5 × základníPísmoPx a 50vw se stane 0,5 × šířkaViewportu. Poté fromPixels() dělí tento počet pixelů odpovídajícím faktorem pro cílovou jednotku. Všech sedm jednotek se zobrazuje současně v převodní tabulce.
  3. 3
    Vyhledání nejbližšího tokenu Tailwind
    Po převodu nástroj vypočítá hodnotu rem a prohledá dvě pevně dané vyhledávací tabulky — třináct tokenů velikosti písma Tailwind (text-xs až text-9xl) a jeho škálu odsazení — a najde nejbližší shodu podle absolutní vzdálenosti. Znak = znamená, že hodnota je přesný token; ≈ znamená, že jde o nejbližší aproximaci.
  4. 4
    Hromadné přepisování CSS pomocí regulárních výrazů
    Panel pro vložení CSS přijímá surový text CSS a aplikuje nahrazení regulárním výrazem: v režimu px→rem porovná každý token px a nahradí číselnou část hodnotou hodnota/základníPísmoPx + rem; v režimu rem→px provede opak. Zobrazuje se počet nahrazení, takže můžete ověřit, kolik hodnot bylo přepsáno.

Související nástroje

📏

Převodník jednotek

Převádějte mezi jednotkami délky, hmotnosti, teploty, plochy, objemu a dalšími.

Vyzkoušet
📐

Generátor CSS clamp()

Generujte plynulou hodnotu CSS clamp() pro responzivní typografii a mezery. Nastavte minimální/maximální velikost a rozsah viewportu, zobrazte živý náhled a zkopírujte jednořádkové CSS.

Vyzkoušet
🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet

Časté dotazy