Pāriet uz galveno saturu
LibraTool logoLibraTool

Pikseļu uz REM konvertētājs bez maksas

Konvertē starp px, rem, em, pt, vw, vh un % ar konfigurējamu bāzes fonta izmēru. Ietver atsauces tabulu izplatītiem pikseļu izmēriem.

Darbojas bezsaistē pēc ielādes
1rem

Konteksts (ietekmē rem/em/vw/vh/%)

Visi konvertējumi 16 px

Tuvākie Tailwind žetoni (pie 16px saknes)

Izplatītie pikseļu izmēri → rem (pie 16px bāzes)

Konvertēt ielīmētu CSS

Biežākie lietojumi

  • PX uz REM tīmekļa izstrādeiPārvērtiet pikseļu vērtības rem vienībās mērogojamam, pieejamam CSS. Nostatiet bāzes fonta lielumu un uzreiz redziet visas līdzvērtīgas vērtības.
  • CSS vienības atsaucīgam dizainamPārvērtiet starp px, vw, vh un %, lai izveidotu izkārtojumus, kas pareizi piemērojas dažādiem ekrāna izmēriem un orientācijām.
  • Pārvērtiet dizaina specifikācijas uz CSS vienībāmTulkojiet pikseļu vērtības no Figma vai Sketch uz rem/em vienībām tīram, mērogojamam CSS īstenojumam.
  • Tailwind CSS vienības atsauceSaprastu, kā Tailwind CSS lieluma klases kartē uz pikseļu un rem vērtībām precīzam īstenojumam.
  • Pārvērtiet CSS vienības drukas stiliemPārvērtiet starp px, pt un rem drukas mediju vaicājumiem un CSS izvilkumam PDF.

Kā tas darbojas

Visas konvertēšanas notiek pilnībā jūsu pārlūkprogrammā, izmantojot pašrakstītu aritmētikas dzinēju bez atkarībām. Rīks konvertē starp septiņām CSS vienībām (px, rem, em, pt, vw, vh un %), maršrutējot katru aprēķinu caur pikseļiem kā kopīgu bāzi, pielietojot vienkāršu dalīšanu vai reizināšanu pret jūsu konfigurēto saknes fonta izmēru, vecāku fonta izmēru vai skatlaukuma izmēriem.

  1. 1
    Iestatiet savas konteksta vērtības
    Pirms konvertēšanas jūs konfigurējat četrus skaitļus, kas padara relatīvās CSS vienības jēgpilnas: saknes fonta izmēru (noklusējums 16px, kas ir pārlūkprogrammas noklusējums), vecāka elementa fonta izmēru (em un % konvertēšanai) un skatlaukuma platumu un augstumu (vw un vh). Šīs ir tās pašas vērtības, ko jūsu pārlūkprogramma izmantotu, atrisinot CSS izpildlaikā.
  2. 2
    Pikselis kā universāls starpposms
    Konvertētājs vispirms izsauc toPixels(), lai normalizētu jūsu ievadi uz neapstrādātu pikseļu skaitu — piemēram, 1.5rem kļūst par 1.5 × baseFontPx, un 50vw kļūst par 0.5 × vpWidth. Tad fromPixels() dala šo pikseļu skaitu ar atbilstošo faktoru mērķa vienībai. Visas septiņas vienības tiek parādītas vienlaicīgi konvertēšanas tabulā.
  3. 3
    Tuvākā Tailwind marķiera meklēšana
    Pēc konvertēšanas rīks aprēķina rem vērtību un skenē divas fiksētas meklēšanas tabulas — Tailwind trīspadsmit fonta-izmēra marķierus (text-xs līdz text-9xl) un tā atstarpes skalu —, atrodot tuvāko sakritumu pēc absolūtā attāluma. = zīme nozīmē, ka vērtība ir precīzs marķieris; ≈ nozīmē, ka tas ir tuvākais tuvinājums.
  4. 4
    Masveida CSS pārrakstīšana caur regex
    Panelis ielīmēt-CSS pieņem neapstrādātu CSS tekstu un pielieto regex aizstāšanu: px→rem režīmā tas sakrīt ar katru px marķieri un aizstāj skaitlisko daļu ar vērtība/baseFontPx + rem; rem→px režīmā tas dara pretējo. Aizstāšanu skaits tiek parādīts, lai varētu pārbaudīt, cik daudz vērtību tika pārrakstītas.

Saistītie rīki

📏

Vienību konvertētājs

Konvertējiet starp garuma, svara, temperatūras, laukuma, tilpuma un citām vienībām.

Izmēģināt
📐

CSS clamp() ģenerētājs

Ģenerē plūstošu CSS clamp() vērtību responsvai tipogrāfijai un atstarpēm. Iestatiet min/max izmēru un skatāmā loga diapazonu, skatiet tiešraides priekšskatījumu un kopējiet vienas rindas CSS.

Izmēģināt
🟦

CSS režģa ģenerators

Vizuāli noformējiet CSS režģi — sliedes, vienības un spraugas — un kopējiet ģenerēto CSS un HTML.

Izmēģināt

Bieži uzdotie jautājumi