Preskoči na glavni sadržaj
LibraTool logoLibraTool

Pretvarač piksela u REM — besplatno

Pretvorite između px, rem, em, pt, vw, vh i % s konfigurabilnom osnovnom veličinom fonta. Uključuje referentnu tablicu za uobičajene veličine piksela.

Radi offline nakon učitavanja
1rem

Kontekst (utječe na rem/em/vw/vh/%)

Sve pretvorbe za 16 px

Najbliži Tailwind tokeni (pri 16px korijena)

Uobičajene veličine piksela → rem (pri bazi 16px)

Konvertiraj zalijepljeni CSS

Uobičajene namjene

  • PX do REM za web razvojPretvori vrijednosti piksela u rem jedinice za skalabilne, pristupačne CSS. Postavi veličinu baznog fonta i odmah vidi sve ekvivalentne vrijednosti.
  • CSS jedinice za responzivni dizajnPretvori između px, vw, vh i % kako bi se izgrađeni raspored koji se pravilno prilagođava različitim veličinama ekrana i orijentacijama.
  • Pretvori specifikacije dizajna u CSS jedinicePrijevedi vrijednosti piksela iz Figme ili Sketcha u rem/em jedinice za čist, skalabilan CSS primjena.
  • Tailwind CSS referenca jediniceRazumij kako se Tailwind CSS klase veličine mapiraju na vrijednosti piksela i rem za preciznu primjenu.
  • Pretvori CSS jedinice za ispis stilovaPretvori između px, pt i rem za ispis upita za medije i CSS izlaz za PDF.

Kako funkcionira

Sve pretvorbe rade u potpunosti u vašem pregledniku koristeći ručno napisani aritmetički mehanizam bez ovisnosti. Alat pretvara između sedam CSS jedinica (px, rem, em, pt, vw, vh i %) usmjeravajući svaki izračun kroz piksele kao zajedničku bazu, primjenjujući jednostavno dijeljenje ili množenje s vašom konfiguriranom korijenskom veličinom fonta, veličinom fonta roditelja ili dimenzijama viewporta.

  1. 1
    Postavite svoje kontekstualne vrijednosti
    Prije pretvorbe, konfigurirate četiri broja koji čine relativne CSS jedinice smislenima: korijensku veličinu fonta (zadano 16px, što je zadana vrijednost preglednika), veličinu fonta roditeljskog elementa (za em i % pretvorbe), i širinu i visinu viewporta (za vw i vh). Ovo su iste vrijednosti koje bi vaš preglednik koristio pri razrješavanju CSS-a u vrijeme izvođenja.
  2. 2
    Piksel kao univerzalni posrednik
    Pretvarač prvo poziva toPixels() za normalizaciju vašeg unosa u sirovi broj piksela — na primjer, 1,5rem postaje 1,5 × baznaVeličinaFontaPx, a 50vw postaje 0,5 × širinaVp. Zatim fromPixels() dijeli taj broj piksela odgovarajućim faktorom za ciljnu jedinicu. Svih sedam jedinica prikazuje se istovremeno u tablici pretvorbe.
  3. 3
    Pretraga najbližeg Tailwind tokena
    Nakon pretvorbe, alat izračunava rem vrijednost i skenira dvije tvrdo kodirane tablice pretrage — trinaest Tailwind tokena veličine fonta (text-xs do text-9xl) i njegovu skalu razmaka — pronalazeći najbliže podudaranje po apsolutnoj udaljenosti. Znak = znači da je vrijednost točan token; ≈ znači da je najbliža aproksimacija.
  4. 4
    Skupno prepisivanje CSS-a putem regexa
    Panel za lijepljenje CSS-a prihvaća sirovi CSS tekst i primjenjuje zamjenu regexom: u načinu px→rem podudara svaki px token i zamjenjuje brojčani dio s vrijednost/baznaVeličinaFontaPx + rem; u načinu rem→px radi obrnuto. Broj zamjena se prikazuje tako da možete provjeriti koliko je vrijednosti prepisano.

Srodni alati

📏

Konvertor mjernih jedinica

Konvertirajte između jedinica duljine, težine, temperature, površine, volumena i više.

Isprobajte
📐

Generator CSS clamp()

Generirajte fluidnu CSS clamp() vrijednost za responzivnu tipografiju i razmake. Postavite minimalnu/maksimalnu veličinu i raspon preglednika, pogledajte živi pregled i kopirajte jednolincijski CSS.

Isprobajte
🟦

CSS Grid generator

Vizualno kreirajte CSS grid — tragove, jedinice i razmake — i kopirajte generirani CSS i HTML.

Isprobajte

Često postavljana pitanja