CSS-eenheden omrekenen
Converteer tussen px, rem, em, vw, vh en andere CSS-eenheden
Instellingen en invoer
Snelle voorinstellingen en voorbeelden
Draait in uw browser. Uw invoer blijft op dit apparaat.
Resultaten
Voer uw waarden in om de resultaten te zien.
Referentie en berekeningsdetails
Over de gratis CSS-eenheden omrekenen
De CSS-eenheden omrekenen is een gratis, uitgebreide tool voor webontwikkelaars en ontwerpers om direct tussen alle belangrijke CSS-lengte-eenheden om te rekenen. Of u nu pixels naar rem, em naar percentages of viewport-eenheden naar absolute maten wilt omrekenen: deze tool toont nauwkeurige omrekeningen in realtime voor 10 verschillende CSS-eenheden tegelijk.
Het begrijpen en juist gebruiken van CSS-eenheden is essentieel voor het bouwen van responsieve, toegankelijke websites. Relatieve eenheden zoals rem en em schalen mee met de instellingen voor lettergrootte, waardoor uw layouts zich aanpassen aan voorkeuren van gebruikers en toegankelijkheidsbehoeften. Viewport-eenheden (vw, vh) zorgen voor vloeiende ontwerpen die reageren op de schermgrootte. Absolute eenheden (px, pt, cm, mm, in) geven vaste maten voor nauwkeurige controle waar dat nodig is.
Deze tool voor het omrekenen van CSS-eenheden gaat verder dan eenvoudige rekenmachines: u past de basislettergrootte voor de berekeningen met rem/em/% aan en stelt de viewport-afmetingen in voor omrekeningen met vw/vh. Alle 10 resultaten staan in een overzichtelijk raster met kopiëren met één klik en direct wisselen van eenheid. Zo vindt u het snelst de juiste CSS-waarde voor elke ontwerpsituatie.
Belangrijkste functies
- Omrekenen tussen 10 CSS-eenheden: px, rem, em, %, vw, vh, pt, cm, mm en in
- Alle omrekeningen tegelijk weergegeven in een responsief raster
- Aanpasbare basislettergrootte voor nauwkeurige berekeningen met rem, em en percentages
- Instelbare viewportbreedte en -hoogte voor nauwkeurige omrekeningen met vw en vh
- Kopiëren naar het klembord met één klik, inclusief de eenheid
- Direct wisselen van eenheid om elke omgerekende waarde als nieuwe bron te gebruiken
- Snelle voorinstellingen voor veelgebruikte waarden zoals 1rem, 100vw, 50% en gangbare lettergroottes
- Beschrijvingen die uitleggen wat elke CSS-eenheid voorstelt
- Slimme getalopmaak met passende decimale nauwkeurigheid
- Ondersteuning voor de donkere modus voor comfortabel werken in elke programmeeromgeving
CSS-eenheden omrekenen gebruiken
- Voer een waarde in: Typ de numerieke waarde die u wilt omrekenen in het invoerveld bovenaan de tool.
- Kies de bron-eenheid: Kies in het keuzemenu de CSS-eenheid van uw invoerwaarde (px, rem, em, %, vw, vh, pt, cm, mm of in).
- Pas indien nodig de instellingen aan: Stel de basislettergrootte (standaard 16px) en de viewport-afmetingen (standaard 1920x1080) in op de configuratie van uw project.
- Bekijk alle omrekeningen: Alle 10 omrekeningen verschijnen direct in het raster hieronder. De bron-eenheid is blauw gemarkeerd, zodat u hem makkelijk herkent.
- Kopiëren of wisselen: Klik op het kopieerpictogram om een omgerekende waarde met eenheid te kopiëren, of klik op het wisselpictogram om die waarde als nieuwe bron voor verdere omrekeningen te gebruiken.
Toepassingen
- Responsief ontwerp: Reken ontwerpen op basis van pixels uit Figma of Sketch om naar rem- en em-eenheden voor schaalbare, toegankelijke CSS-layouts.
- Toegankelijkheidsnormen: Stap over van vaste px-waarden naar relatieve rem/em-eenheden, zodat uw layouts de voorkeuren voor lettergrootte en de WCAG-richtlijnen respecteren.
- Layouts op basis van de viewport: Bereken exacte vw- en vh-waarden voor schermvullende secties, responsieve typografie en vloeiende witruimte.
- Printstylesheets maken: Reken schermeenheden om naar printvriendelijke waarden in pt, cm, mm en in voor CSS @media print-stylesheets.
- Designsystemen ontwikkelen: Zorg voor consistente schalen voor witruimte en typografie door tussen eenhedensystemen in uw designtokens om te rekenen.
- Migratie van CSS-frameworks: Reken tussen eenhedensystemen om bij de overstap van het ene CSS-framework of de ene methodiek naar de andere.
- Platformoverstijgende ontwikkeling: Zorg voor consistente afmetingen bij webontwikkeling, mobiel web en hybride apps door tussen platformspecifieke eenheden om te rekenen.
Veelgestelde vragen
Is deze tool gratis?
Ja, CSS-eenheden omrekenen is volledig gratis te gebruiken. Er zijn geen gebruikslimieten, u hebt geen account nodig en er zijn geen betaalde functies. Reken zoveel waarden om als u wilt.
Zijn mijn gegevens veilig?
Zeker. Alle omrekeningen worden volledig in uw browser berekend met JavaScript. Er worden geen gegevens naar een server gestuurd. De tool werkt volledig offline zodra de pagina is geladen.
Waarom moet ik een basislettergrootte instellen?
Relatieve eenheden zoals rem, em en % zijn afhankelijk van een referentielettergrootte. De meeste browsers hanteren standaard 16px, maar uw project kan een andere basis gebruiken. Met de juiste basislettergrootte zijn de omrekeningen nauwkeurig voor de configuratie van uw project.
Wat is het verschil tussen rem en em?
Zowel rem als em zijn relatief aan de lettergrootte, maar rem is altijd relatief aan de lettergrootte van het hoofdelement (html), terwijl em relatief is aan de lettergrootte van het bovenliggende element. In deze converter gebruiken beide de ingestelde basislettergrootte, omdat de specifieke DOM-context niet beschikbaar is.
Hoe worden viewport-eenheden berekend?
1vw is gelijk aan 1% van de viewportbreedte en 1vh is gelijk aan 1% van de viewporthoogte. De converter gebruikt de viewport-afmetingen die u instelt (standaard 1920x1080) om deze waarden te berekenen. Pas de instellingen aan op de schermgrootte waarvoor u ontwerpt voor nauwkeurige resultaten.
Hoe werkt het omrekenen van px naar pt?
De omrekening gebruikt de standaardverhouding van 96 CSS-pixels per inch en 72 punten per inch. Daardoor is 1pt ongeveer gelijk aan 1,333px (96/72). Deze verhouding is hetzelfde in alle moderne browsers en besturingssystemen.
Tips & best practices
- Gebruik rem voor typografie: Stel uw basislettergrootte in op het html-element en gebruik rem-eenheden voor alle tekstgroottes voor consistente, toegankelijke typografie op uw hele site.
- Geef de voorkeur aan relatieve eenheden: Gebruik rem, em en % voor witruimte en layout om ontwerpen te maken die zich aanpassen aan voorkeuren van gebruikers en verschillende schermgroottes.
- Stem af op uw project: Stel in de converter altijd de basislettergrootte en de viewport-afmetingen in op de werkelijke configuratie van uw project voor nauwkeurige resultaten.
- Gebruik viewport-eenheden spaarzaam: Vw en vh zijn krachtig voor vloeiende layouts, maar kunnen problemen geven in mobiele browsers waar de viewportgrootte tijdens het scrollen verandert. Overweeg CSS clamp() voor robuustere responsieve waarden.
- Test op meerdere apparaten: Test uw CSS na het omrekenen van eenheden op meerdere apparaten en schermgroottes om te controleren of de waarden het gewenste visuele resultaat geven.
- Bewaar veelgebruikte omrekeningen: Gebruik de snelle voorinstellingen voor vaak gebruikte waarden zoals 1rem, gangbare lettergroottes en gebruikelijke viewportberekeningen om sneller te werken.