Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis Pixel na REM-omskakelaar

Skakel tussen px, rem, em, pt, vw, vh en % met 'n konfigureerbare basiese lettergrootte. Sluit 'n verwysingstabel vir algemene pixelgroottes in.

Werk vanlyn sodra gelaai
1rem

Konteks (beïnvloed rem/em/vw/vh/%)

Alle omskakelinge vir 16 px

Naaste Tailwind-tokens (teen 16px wortel)

Algemene pixel-groottes → rem (by 16px basis)

Omgeplakde CSS

Algemene gebruike

  • PX na REM vir webontwikkelingSkakel pikselwaardes na rem-eenhede vir skaalbare, toeganklike CSS. Stel jou basislettergrootte in en sien onmiddellik alle ekwivalente waardes.
  • CSS-eenhede vir responsiewe ontwerpSkakel tussen px, vw, vh en % om uitlegstelle te bou wat korrek op verskillende skermgroottes en oriëntasies reageer.
  • Skakel ontwerpspesifikasies na CSS-eenhedeVertaal Figma- of Sketch-pikselhawaardes na rem/em-eenhede vir skoon, skaalbare CSS-implementering.
  • Tailwind CSS-eenheidsverwysingVerstaan hoe Tailwind CSS-afmelingklasse na piksel- en remwaardes kaart vir presiese implementering.
  • Skakel CSS-eenhede vir drukkersbladsyeSkakel tussen px, pt en rem vir drukmediumnavrae en PDF-uitvoer-CSS.

Hoe dit werk

Alle omskakelings loop heeltemal in jou blaaier met 'n handgeskrewe rekenkunde-enjin sonder afhanklikhede. Die nutsprogram skakel om tussen sewe CSS-eenhede (px, rem, em, pt, vw, vh, en %) deur elke berekening deur pixels as 'n gemeenskaplike basis te roeteer, en pas eenvoudige deling of vermenigvuldiging toe teen jou geconfigureerde wortel-lettertipegrootte, ouer-lettertipegrootte, of kykskermafmetings.

  1. 1
    Stel jou konteks-waardes
    Voor omskakeling stel jy die vier getalle wat relatiewe CSS-eenhede betekenisvol maak: wortel-lettertipegrootte (verstek 16px, wat die blaaierverstek is), ouer-element-lettertipegrootte (vir em- en %-omskakelings), en kykskermwydte en -hoogte (vir vw en vh). Dit is dieselfde waardes wat jou blaaier sou gebruik wanneer dit CSS tydens looptyd oplos.
  2. 2
    Pixel as die universele tussenganger
    Die omskakelaar roep eers toPixels() aan om jou toevoer na 'n rou pixeltelling te normaliseer — byvoorbeeld, 1.5rem word 1.5 × basisLettertipePx, en 50vw word 0.5 × kykskermWydte. Dan deel fromPixels() daardie pixeltelling deur die toepaslike faktor vir die teikeneenheid. Al sewe eenhede word gelyktydig in die omskakelingstabel gewys.
  3. 3
    Naaste-Tailwind-token-opsoek
    Na omskakeling bereken die nutsprogram die rem-waarde en deursoek twee vasgekodeerde opsoektabelle — Tailwind se dertien lettertipegrootte-tokens (text-xs tot text-9xl) en sy spasiëringskaal — en vind die naaste passing volgens absolute afstand. 'n =-teken beteken die waarde is 'n presiese token; ≈ beteken dit is die naaste benadering.
  4. 4
    Massa-CSS-herskrywing via reëlmatige uitdrukking
    Die plak-CSS-paneel aanvaar rou CSS-teks en pas 'n reëlmatige-uitdrukking-vervanging toe: in px→rem-modus pas dit elke px-token en vervang die numeriese deel met waarde/basisLettertipePx + rem; in rem→px-modus doen dit die omgekeerde. Die vervangingstelling word gewys sodat jy kan verifieer hoeveel waardes herskryf is.

Verwante gereedskap

📏

Eenheids-omskeper

Omskep tussen eenhede van lengte, gewig, temperatuur, oppervlakte, volume en meer.

Probeer dit
📐

CSS klem() Generator

Genereer 'n vloeibare CSS clamp() waarde vir responsiewe tipografie en spasiëring. Stel minimum/maksimum grootte en kykpoortreeks, sien 'n regstreekse voorskou, en kopieer die eenreël CSS.

Probeer dit
🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit

Gereelde vrae