Preskoči na glavno vsebino
LibraTool logoLibraTool

Pretvornik pikslov v REM — brezplačno

Pretvorite med px, rem, em, pt, vw, vh in % z nastavljivo osnovno velikostjo pisave. Vključuje referenčno tabelo za pogosteje velikosti pikslov.

Deluje brez povezave po nalaganju
1rem

Kontekst (vpliva na rem/em/vw/vh/%)

Vse pretvorbe za 16 px

Najbližji Tailwind žetoni (pri 16px korenu)

Pogoste velikosti v pikslih → rem (pri osnovi 16px)

Pretvori prilepljeni CSS

Pogosta področja uporabe

  • PX do REM za spletno razvojPretvorite vrednosti pikslov v enote rem za skalabilne, dostopne CSS. Nastavite velikost osnovne pisave in takoj vidite vse enakovredne vrednosti.
  • CSS enote za odzivni oblikovanjePretvorite med px, vw, vh in %, da gradiš postavitve, ki se pravilno prilagodijo različnim velikostim in orientacijam zaslona.
  • Pretvorite specifikacije oblikovanja v CSS enotePrevedite vrednosti pikslov iz Figme ali Sketcha v enote rem/em za čisto, skalabilno CSS izvedbo.
  • Tailwind CSS referenca enoteRazumite, kako se razredi velikosti Tailwind CSS preslikajo na vrednosti pikslov in rem za natančno izvedbo.
  • Pretvorite CSS enote za natisnjena slogovePretvorite med px, pt in rem za tiskane medialne poizvedbe in CSS izhod za PDF.

Kako deluje

Vse pretvorbe tečejo v celoti v vašem brskalniku z uporabo ročno napisanega aritmetičnega pogona brez odvisnosti. Orodje pretvarja med sedmimi CSS enotami (px, rem, em, pt, vw, vh in %) tako, da vsak izračun usmeri skozi piksle kot skupno osnovo, pri čemer uporabi preprosto deljenje ali množenje glede na vašo nastavljeno korensko velikost pisave, velikost pisave nadrejenega ali mere ogleda.

  1. 1
    Nastavite svoje kontekstne vrednosti
    Pred pretvorbo nastavite štiri številke, ki dajo relativnim CSS enotam smisel: korensko velikost pisave (privzeto 16px, kar je privzeta vrednost brskalnika), velikost pisave nadrejenega elementa (za pretvorbe em in %) ter širino in višino ogleda (za vw in vh). To so iste vrednosti, ki bi jih vaš brskalnik uporabil pri razreševanju CSS med izvajanjem.
  2. 2
    Piksel kot univerzalni vmesnik
    Pretvornik najprej pokliče toPixels(), da normalizira vaš vnos na surovo število pikslov — na primer 1,5rem postane 1,5 × baseFontPx, 50vw pa postane 0,5 × vpWidth. Nato fromPixels() deli to število pikslov z ustreznim faktorjem za ciljno enoto. Vseh sedem enot je prikazanih hkrati v pretvorbeni tabeli.
  3. 3
    Iskanje najbližjega žetona Tailwind
    Po pretvorbi orodje izračuna vrednost rem in pregleda dve fiksno zakodirani iskalni tabeli — trinajst žetonov velikosti pisave Tailwind (text-xs do text-9xl) in njegovo lestvico razmikov — pri čemer najde najbližje ujemanje po absolutni razdalji. Znak = pomeni, da je vrednost natančen žeton; ≈ pomeni, da je najbližji približek.
  4. 4
    Množično prepisovanje CSS prek regularnega izraza
    Panel za lepljenje CSS sprejme surovo besedilo CSS in uporabi nadomeščanje z regularnim izrazom: v načinu px→rem ujame vsak žeton px in nadomesti številski del z vrednost/baseFontPx + rem; v načinu rem→px naredi obratno. Prikazano je število nadomeščanj, tako da lahko preverite, koliko vrednosti je bilo prepisanih.

Sorodna orodja

📏

Pretvornik enot

Pretvarjajte med enotami dolžine, teže, temperature, površine, prostornine itd.

Poskusite
📐

Generator CSS clamp()

Ustvarite tekočo vrednost CSS clamp() za odzivno tipografijo in razmike. Nastavite minimalno/maksimalno velikost in obseg vidnega polja, oglejte si živi predogled in kopirajte enolinijski CSS.

Poskusite
🟦

Generator CSS Grid

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Poskusite

Pogosto zastavljena vprašanja