CSS-eenhedenconverter
Reken px-, rem-, em- en pt-waarden om met instelbare lettergroottes voor root en element. Volledig in je browser, zonder uploads.
🔒 Draait volledig in uw browser — niets wordt geüploadWat de CSS-eenhedenconverter doet
De CSS-eenhedenconverter rekent waarden om tussen px, rem, em en pt met instelbare basisgroottes. Handig als je een designtoken naar CSS overzet, typografische schalen controleert, een oude stylesheet omzet, printgerichte puntwaarden vergelijkt of bepaalt of een component root-relatieve of element-relatieve maten moet gebruiken. Voer een bronwaarde in, kies de eenheid, stel de lettergroottes van root en element in, en de equivalente waarden worden direct bijgewerkt. De converter behandelt rem als relatief aan de lettergrootte van de root en em als relatief aan de lettergrootte van het huidige element.
De omrekening tussen pixels en punten gebruikt de CSS-verhouding waarbij één punt gelijk is aan een en een derde pixel, dus één pixel is 0,75 punt. Door alle equivalenten tegelijk te tonen, zie je makkelijker of een spacing- of lettergroottetoken past bij de rest van een schaal. De kopieerknop maakt een compacte samenvatting over meerdere regels voor notities, pull requests of tokenreviews.
Privé werken in je browser
Alle verwerking gebeurt in je browser met JavaScript aan de clientzijde. De tool uploadt geen fragmenten, configuratiewaarden, gegenereerde gegevens, querytekst of gekopieerde voorbeelden naar een server en vereist geen account. Dat uitsluitend lokale model is belangrijk bij ontwikkelaarshulpmiddelen, omdat de geplakte inhoud vaak op echte applicatiegegevens lijkt: API-antwoorden, logs, voorbeelden in de vorm van omgevingsvariabelen, databasequery's, markup uit concepten of waarden uit debugsessies in productie. Lokaal houden van de bewerking verkleint het risico en houdt de interactie snel, omdat er geen netwerkverkeer is.
De interface is bewust compact, zodat je invoer kunt plakken, opties kunt aanpassen, de uitvoer kunt bekijken, kopiëren en terug kunt gaan naar je editor. Controleer resultaten nog steeds voordat je ze commit, openbaar deelt of in een productieworkflow gebruikt. Browserhulpmiddelen zijn uitstekend voor snelle inspectie en voorbereiding, maar ze kennen niet elke projectconventie, dataclassificatieregel of toepassingsspecifieke validatie-eis.
Praktische tips
Gebruik rem voor waarden die de documentroot moeten volgen, zoals toegankelijke lettergroottes en layoutruimte die aan gebruikersvoorkeuren gekoppeld is. Gebruik em wanneer een waarde moet meeschalen met de lettergrootte van de component zelf, zoals bij het uitlijnen van pictogrammen, lokale padding of geneste typografie. Gebruik px met zorg voor exacte randen, rasterafbeeldingen en situaties waarin relatieve schaling niet gewenst is. Werkelijk berekende maten kunnen beïnvloed worden door browserinstellingen, overerving, zoom, media queries en containerspecifieke stijlen, dus controleer belangrijke waarden in de ontwikkelaarstools.
Hoe te gebruiken
- Waarde invoerenTyp het bronnummer en kies px, rem, em of pt.
- Basiswaarden instellenPas indien nodig de lettergroottes van root en element aan.
- Equivalenten aflezenKopieer de omgerekende waarden in px, rem, em en pt.