Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis Pixel till REM-konverterare

Konvertera mellan px, rem, em, pt, vw, vh och % med en konfigurerbar basteckensnittsstorlek. Inkluderar en referenstabell för vanliga pixelstorlekar.

Fungerar offline när den väl lästs in
1rem

Kontext (påverkar rem/em/vw/vh/%)

Alla konverteringar för 16 px

Närmaste Tailwind-tokens (vid 16px root)

Vanliga pixelstorlekar → rem (vid 16px bas)

Konvertera inklistrad CSS

Vanliga användningar

  • PX till REM för webbutvecklingKonvertera pixelvärden till rem-enheter för skalbar, tillgänglig CSS. Ställ in din basstorlek och se omedelbar alla motsvarande värden.
  • CSS-enheter för responsiv designKonvertera mellan px, vw, vh och % för att bygga layouter som svarar korrekt på olika skärmstorlekar och orienteringar.
  • Konvertera designspecifikationer till CSS-enheterÖversätt Figma eller Sketch-pixelvärden till rem/em-enheter för ren, skalbar CSS-implementering.
  • Tailwind CSS-enhetsreferensFörstå hur Tailwind CSS-storleksklasser mappas till pixel- och rem-värden för exakt implementering.
  • Konvertera CSS-enheter för utskriftsformatmallarKonvertera mellan px, pt och rem för utskriftsmediekällor och CSS för PDF-utdata.

Så här fungerar det

Alla omvandlingar körs helt i din webbläsare med en handskriven aritmetisk motor utan beroenden. Verktyget omvandlar mellan sju CSS-enheter (px, rem, em, pt, vw, vh och %) genom att dirigera varje beräkning via pixlar som gemensam bas, och tillämpar enkel division eller multiplikation mot din inställda rotteckenstorlek, förälderns teckenstorlek eller fönsterdimensioner.

  1. 1
    Ställ in dina kontextvärden
    Innan omvandling ställer du in de fyra tal som gör relativa CSS-enheter meningsfulla: rotteckenstorlek (standard 16px, som är webbläsarens standard), förälderelementets teckenstorlek (för em- och %-omvandlingar), och fönstrets bredd och höjd (för vw och vh). Dessa är samma värden som din webbläsare skulle använda vid uppslagning av CSS vid körning.
  2. 2
    Pixel som universellt mellansteg
    Omvandlaren anropar först toPixels() för att normalisera din indata till ett rått pixelantal — till exempel blir 1,5rem 1,5 × baseFontPx, och 50vw blir 0,5 × vpWidth. Sedan delar fromPixels() det pixelantalet med rätt faktor för målenheten. Alla sju enheter visas samtidigt i omvandlingstabellen.
  3. 3
    Uppslag av närmaste Tailwind-token
    Efter omvandling beräknar verktyget rem-värdet och söker i två hårdkodade uppslagstabeller — Tailwinds tretton teckenstorlekstoken (text-xs till text-9xl) och dess mellanrumsskala — och hittar den närmaste matchningen genom absolut avstånd. Ett =-tecken betyder att värdet är en exakt token; ≈ betyder att det är den närmaste approximationen.
  4. 4
    Batchomskrivning av CSS via regex
    Klistra-in-CSS-panelen accepterar rå CSS-text och tillämpar en regex-substitution: i px→rem-läge matchar den varje px-token och ersätter den numeriska delen med värde/baseFontPx + rem; i rem→px-läge gör den det omvända. Antalet ersättningar visas så att du kan verifiera hur många värden som skrevs om.

Relaterade verktyg

📏

Enhetsomvandlare

Konvertera mellan enheter för längd, vikt, temperatur, area, volym och mer.

Prova det
📐

CSS clamp()-generator

Generera ett flytande CSS clamp()-värde för responsiv typografi och avstånd. Ange min/max-storlek och vyportintervall, se en liveförhandsvisning och kopiera en-rads-CSS.

Prova det
🟦

CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Prova det

Vanliga frågor