Salt la conținutul principal
LibraTool logoLibraTool

Convertor Pixeli în REM — gratuit

Convertește între px, rem, em, pt, vw, vh și % cu o dimensiune de font de bază configurabilă. Include un tabel de referință pentru dimensiunile comune de pixeli.

Funcționează offline odată încărcat
1rem

Context (afectează rem/em/vw/vh/%)

Toate conversiile pentru 16 px

Jetoane Tailwind cele mai apropiate (la 16px rădăcină)

Dimensiuni px comune → rem (bază 16px)

Convertește CSS-ul lipit

Utilizări frecvente

  • PX la REM pentru dezvoltare webConvertiți valorile pixelilor în unități rem pentru CSS scalabil și accesibil. Setați dimensiunea fontului de bază și vedeți instantaneu toate valorile echivalente.
  • Unități CSS pentru design receptivConvertiți între px, vw, vh și % pentru a construi aspecte care răspund corect la diferite dimensiuni și orientări de ecran.
  • Convertiți specificațiile de design în unități CSSTraduceți valorile pixelilor Figma sau Sketch în unități rem/em pentru implementare CSS curată și scalabilă.
  • Referință unitate Tailwind CSSÎnțelegeți cum se mapează clasele de dimensionare Tailwind CSS la valorile pixelilor și rem pentru implementare precisă.
  • Convertiți unitățile CSS pentru șabloane de imprimareConvertiți între px, pt și rem pentru interogări media de imprimare și CSS de ieșire PDF.

Cum funcționează

Toate conversiile rulează în întregime în browser-ul tău folosind un motor aritmetic scris manual, fără dependențe. Unealta convertește între șapte unități CSS (px, rem, em, pt, vw, vh, și %) rutând fiecare calcul prin pixeli ca bază comună, aplicând împărțire sau înmulțire simplă față de dimensiunea configurată a fontului rădăcină, dimensiunea fontului părinte, sau dimensiunile viewport-ului.

  1. 1
    Setează valorile de context
    Înainte de a converti, configurezi cele patru numere care fac unitățile CSS relative semnificative: dimensiunea fontului rădăcină (implicit 16px, care este implicitul browser-ului), dimensiunea fontului elementului părinte (pentru conversii em și %), și lățimea și înălțimea viewport-ului (pentru vw și vh). Acestea sunt aceleași valori pe care browser-ul tău le-ar folosi la rezolvarea CSS-ului la runtime.
  2. 2
    Pixelul ca intermediar universal
    Convertorul apelează mai întâi toPixels() pentru a normaliza intrarea ta la un număr brut de pixeli — de exemplu, 1,5rem devine 1,5 × baseFontPx, și 50vw devine 0,5 × vpWidth. Apoi fromPixels() împarte acel număr de pixeli la factorul corespunzător pentru unitatea țintă. Toate cele șapte unități sunt afișate simultan în tabelul de conversie.
  3. 3
    Căutarea celui mai apropiat token Tailwind
    După conversie, unealta calculează valoarea rem și scanează două tabele de căutare codificate — cele treisprezece token-uri de dimensiune font ale Tailwind (text-xs până la text-9xl) și scala sa de spațiere — găsind cea mai apropiată potrivire după distanța absolută. Un semn = înseamnă că valoarea este un token exact; ≈ înseamnă că este cea mai apropiată aproximare.
  4. 4
    Rescriere CSS în lot prin regex
    Panoul de lipire CSS acceptă text CSS brut și aplică o substituție regex: în modul px→rem potrivește fiecare jeton px și înlocuiește partea numerică cu value/baseFontPx + rem; în modul rem→px face inversul. Numărul de substituții este afișat astfel încât poți verifica câte valori au fost rescrise.

Instrumente similare

📏

Convertor de unități

Convertește între unități de lungime, greutate, temperatură, suprafață, volum și altele.

Încearcă
📐

Generator CSS clamp()

Generează o valoare CSS clamp() fluidă pentru tipografie și spațiere responsive. Setează dimensiunea min/max și intervalul de viewport, vizualizează o previzualizare live și copiază CSS-ul pe o singură linie.

Încearcă
🟦

Generator CSS Grid

Proiectați vizual un CSS grid — tracks, unități și spații — și copiați CSS și HTML generat.

Încearcă

Întrebări frecvente