Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis Piksel til REM-konverterer

Konverter mellom px, rem, em, pt, vw, vh og % med konfigurerbar basisskriftstørrelse. Inkluderer referansetabell for vanlige pikselverdier.

Fungerer uten nett når den er lastet
1rem

Kontekst (påvirker rem/em/vw/vh/%)

Alle konverteringer for 16 px

Nærmeste Tailwind-tokens (ved 16px rot)

Vanlige pikselstørrelser → rem (ved 16px basis)

Konverter innlimt CSS

Vanlige bruksområder

  • PX til REM for webutviklingKonverter pikselverdier til rem-enheter for skalbar, tilgjengelig CSS. Angi din basiskriftstørrelse og få øyeblikkelig alle tilsvarende verdier.
  • CSS-enheter for responsivt designKonverter mellom px, vw, vh og % for å bygge oppsett som reagerer riktig på ulike skjermstørrelser og orienteringer.
  • Konverter designspesifikasjoner til CSS-enheterOversett Figma eller Sketch pikselverdier til rem/em-enheter for ren, skalbar CSS-implementering.
  • Tailwind CSS-enhetreferanseForstå hvordan Tailwind CSS-størrelsesklasser kartlegges til piksel- og rem-verdier for nøyaktig implementering.
  • Konverter CSS-enheter for utskriftsstilmalerKonverter mellom px, pt og rem for utskriftsmediekildekoder og PDF-utgangs-CSS.

Hvordan det fungerer

Alle konverteringer kjører helt i nettleseren med en håndskrevet aritmetikkmotor uten avhengigheter. Verktøyet konverterer mellom sju CSS-enheter (px, rem, em, pt, vw, vh og %) ved å sende hver beregning via piksler som felles grunnlag, med enkel divisjon eller multiplikasjon mot angitt rotskriftstørrelse, foreldreskriftstørrelse eller visningsmål.

  1. 1
    Angi kontekstverdiene
    Før du konverterer, angir du de fire tallene som gir relative CSS-enheter mening: rotskriftstørrelse (standard 16px, nettleserens standard), skriftstørrelse på foreldreelementet (for em- og %-konverteringer) og visningsbredde og -høyde (for vw og vh). Det er de samme verdiene nettleseren din bruker når den løser opp CSS ved kjøretid.
  2. 2
    Piksler som universelt mellomledd
    Konverteren kaller først toPixels() for å normalisere inndataene til et rått antall piksler — for eksempel blir 1.5rem til 1,5 × baseFontPx, og 50vw blir 0,5 × vpWidth. Deretter deler fromPixels() pikselantallet på riktig faktor for målenheten. Alle sju enhetene vises samtidig i konverteringstabellen.
  3. 3
    Oppslag av nærmeste Tailwind-token
    Etter konverteringen beregner verktøyet rem-verdien og søker gjennom to faste oppslagstabeller — Tailwinds tretten skriftstørrelsestokener (text-xs til text-9xl) og avstandsskalaen — og finner nærmeste treff etter absolutt avstand. Et =-tegn betyr at verdien er et eksakt token; ≈ betyr at det er nærmeste tilnærming.
  4. 4
    Masseomskriving av CSS via regex
    Panelet for innliming av CSS godtar rå CSS-tekst og bruker en regex-erstatning: i px→rem-modus finner det hvert px-token og erstatter talldelen med verdi/baseFontPx + rem; i rem→px-modus gjør det det motsatte. Antall erstatninger vises, så du kan kontrollere hvor mange verdier som ble skrevet om.

Relaterte verktøy

📏

Enhetsomformer

Konverter mellom enheter for lengde, vekt, temperatur, areal, volum og mer.

Prøv det
📐

CSS clamp()-generator

Generer en flytende CSS clamp()-verdi for responsiv typografi og avstand. Angi min-/maksstørrelse og visningsbredde-intervall, se en live forhåndsvisning og kopier CSS-en på én linje.

Prøv det
🟦

CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Prøv det

Ofte stilte spørsmål