Gratis Pixel naar REM-converter

Hoe het werkt

Alle omrekeningen draaien volledig in je browser met een zelfgeschreven rekenengine zonder afhankelijkheden. De tool rekent om tussen zeven CSS-eenheden (px, rem, em, pt, vw, vh en %) door elke berekening via pixels als gemeenschappelijke basis te laten lopen, met eenvoudige deling of vermenigvuldiging op basis van je ingestelde basislettergrootte, lettergrootte van het ouderelement of viewportafmetingen.

1. 1
   Stel je contextwaarden in

   Voordat je omrekent, stel je de vier getallen in die relatieve CSS-eenheden betekenis geven: de basislettergrootte (standaard 16px, de standaard van browsers), de lettergrootte van het ouderelement (voor em en %) en de breedte en hoogte van de viewport (voor vw en vh). Dit zijn dezelfde waarden die je browser gebruikt bij het verwerken van CSS.
2. 2
   Pixel als universele tussenstap

   De converter roept eerst toPixels() aan om je invoer te normaliseren tot een ruw aantal pixels — 1.5rem wordt bijvoorbeeld 1,5 × baseFontPx, en 50vw wordt 0,5 × vpWidth. Daarna deelt fromPixels() dat aantal pixels door de juiste factor voor de doeleenheid. Alle zeven eenheden worden tegelijk in de omrekentabel getoond.
3. 3
   Dichtstbijzijnde Tailwind-token opzoeken

   Na het omrekenen berekent de tool de rem-waarde en doorzoekt twee vaste opzoektabellen — de dertien lettergroottetokens van Tailwind (text-xs tot en met text-9xl) en de spacingschaal — om de dichtstbijzijnde overeenkomst op absolute afstand te vinden. Een =-teken betekent dat de waarde precies een token is; ≈ betekent dat het de dichtstbijzijnde benadering is.
4. 4
   CSS in bulk herschrijven met een regex

   Het paneel voor het plakken van CSS accepteert ruwe CSS-tekst en past een regexvervanging toe: in de modus px→rem vindt het elk px-token en vervangt het getal door waarde/baseFontPx + rem; in de modus rem→px gebeurt het omgekeerde. Het aantal vervangingen wordt getoond, zodat je kunt controleren hoeveel waarden zijn herschreven.

Gerelateerde tools