Preskočiť na hlavný obsah
LibraTool logoLibraTool

Konvertor Pixel na REM zadarmo

Konvertujte medzi px, rem, em, pt, vw, vh a % s nastaviteľnou základnou veľkosťou písma. Zahŕňa referenčnú tabuľku pre bežné veľkosti pixelov.

Po načítaní funguje offline
1rem

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

Všetky konverzie pre 16 px

Najbližšie Tailwind tokeny (pri 16px root)

Bežné veľkosti v pixeloch → rem (základ 16px)

Konvertovať vložené CSS

Bežné použitia

  • PX na REM pre webový vývojKonvertujte hodnoty pixelov na jednotky rem pre škálovateľné, prístupné CSS. Nastavte základnú veľkosť písma a okamžite vidíte všetky ekvivalentné hodnoty.
  • CSS jednotky pre reaktívny dizajnKonvertujte medzi px, vw, vh a % na vytvorenie rozložení, ktoré sa správne prispôsobia rôznym veľkostiam obrazovky a orientáciám.
  • Konvertujte špecifikácie dizajnu na CSS jednotkyPreložte hodnoty pixelov z Figma alebo Sketchu na jednotky rem/em na čisté, škálovateľné CSS implementácie.
  • Tailwind CSS jednotka referenciePochopte, ako sa triedy veľkosti Tailwind CSS mapujú na hodnoty pixelov a rem na presnú implementáciu.
  • Konvertujte CSS jednotky na tlač štýlovKonvertujte medzi px, pt a rem pre tlačové mediálne query a výstup CSS pre PDF.

Ako to funguje

Všetky prevody bežia výhradne vo vašom prehliadači pomocou ručne napísaného aritmetického enginu bez akýchkoľvek závislostí. Nástroj prevádza medzi siedmimi CSS jednotkami (px, rem, em, pt, vw, vh a %) tak, že každý výpočet smeruje cez pixely ako spoločný základ, pričom aplikuje jednoduché delenie alebo násobenie voči vašej nastavenej koreňovej veľkosti písma, veľkosti písma rodiča alebo rozmerom výrezu.

  1. 1
    Nastavte svoje kontextové hodnoty
    Pred prevodom nastavíte štyri čísla, ktoré dávajú relatívnym CSS jednotkám zmysel: koreňovú veľkosť písma (predvolene 16 px, čo je predvolená hodnota prehliadača), veľkosť písma nadradeného elementu (pre prevody em a %) a šírku a výšku výrezu (pre vw a vh). Sú to rovnaké hodnoty, aké by váš prehliadač použil pri spracovaní CSS za behu.
  2. 2
    Pixel ako univerzálny medzikrok
    Prevodník najprv zavolá toPixels() na normalizáciu vášho vstupu na surový počet pixelov — napríklad 1,5rem sa stane 1,5 × základnéPísmoPx a 50vw sa stane 0,5 × šírkaVýrezu. Potom fromPixels() vydelí tento počet pixelov príslušným faktorom pre cieľovú jednotku. Všetkých sedem jednotiek sa zobrazuje súčasne v prevodovej tabuľke.
  3. 3
    Vyhľadávanie najbližšieho tokenu Tailwind
    Po prevode nástroj vypočíta hodnotu rem a prehľadá dve pevne zakódované vyhľadávacie tabuľky — trinásť tokenov veľkosti písma Tailwindu (text-xs až text-9xl) a jeho škálu odsadenia — pričom nájde najbližšiu zhodu podľa absolútnej vzdialenosti. Znamienko = znamená, že hodnota je presný token; ≈ znamená, že je to najbližšia aproximácia.
  4. 4
    Hromadné prepisovanie CSS cez regulárny výraz
    Panel vloženia CSS prijíma surový CSS text a aplikuje nahradenie regulárnym výrazom: v režime px→rem zhoduje každý token px a nahradí číselnú časť výrazom hodnota/základnéPísmoPx + rem; v režime rem→px robí opak. Zobrazuje sa počet nahradení, takže môžete overiť, koľko hodnôt bolo prepísaných.

Súvisiace nástroje

📏

Konvertor jednotiek

Konvertujte medzi jednotkami dĺžky, hmotnosti, teploty, plochy, objemu a ďalšími.

Vyskúšajte
📐

Generátor CSS clamp()

Generujte plynulú hodnotu CSS clamp() pre responzívnu typografiu a medzery. Nastavte minimálnu/maximálnu veľkosť a rozsah viewportu, pozrite si živý náhľad a skopírujte jednoriadkové CSS.

Vyskúšajte
🟦

Generátor CSS mriežky

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Vyskúšajte

Často kladené otázky