| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Een CSS-eenheidconverter vertaalt een lengte tussen de eenheden die CSS gebruikt voor het dimensioneren van type en lay-out: PX, REM, EM, PT en %. Het bestaat omdat modern responsief ontwerp op relatieve eenheden leunt - REM- en EM-schaal met de lettergrootte-instellingen en zoom van de gebruiker - terwijl ontwerpmodellen en oudere stylesheets meestal worden uitgedrukt in vaste pixels. Deze tool heeft een waarde zoals 24px en toont het als 1.5REM, 1.5EM, 18PT en 150% tegelijk, en werkt in elke richting vanuit een enkel veld.
De conversies hangen allemaal af van één getal: de root-(basis) lettergrootte, die standaard op 16px staat omdat dat de standaard browser is voor het HTML-element. Eén REM is altijd gelijk aan die basislettergrootte, dus bij 16px is de waarde 16px 1rem, 24px 1.5rem en 8px 0.5Rem. Punten zijn gekoppeld aan de CSS-referentiepixel - 1 inch is 96px en 72pt - dus 1pt is gelijk aan 96/72, ongeveer 1,333px. Percentage wordt behandeld als een aandeel van de basislettergrootte, dus 100% is gelijk aan de basis en 50% is gelijk aan de helft ervan.
Alles wordt in uw browser uitgevoerd terwijl u typt, dus er is geen upload, geen wachten op een server en geen limiet aan het aantal waarden dat u converteert. Verander de basislettergrootte om een component te modelleren die zijn eigen lettergrootte instelt, lees de resultaten in elke eenheid en kopieer degene die u nodig hebt. De ingebouwde PX-to-Rem-tabel geeft u een kant-en-klare referentie voor de maten die het meest voorkomen in een typeschaal.
Typ het nummer dat u wilt converteren en kies de eenheid waarin het zich momenteel bevindt: PX, REM, EM, PT of %. U kunt ook een waarde met de eenheid plakken, zoals 24px, en de tool zal het apparaat voor u lezen.
Pas de hoofdlettergrootte aan als uw project iets anders gebruikt dan de standaard 16px-browser. Dit bepaalt hoe REM, EM en % zich verhouden tot pixels.
De converter toont direct de equivalente waarde in alle ondersteunde eenheden, elk met het eenheidsachtervoegsel, zodat u het rechtstreeks in CSS kunt laten vallen.
Kopieer een resultaat met één klik of scan de PX-naar-REM-referentietabel voor de gemeenschappelijke formaten in een typografische schaal.
Voer één waarde in en zie onmiddellijk px, rem, em, pt en % naast elkaar, elk geformatteerd met zijn eenheid, zodat u het rechtstreeks in een stylesheet kunt plakken.
De root-lettergrootte is instelbaar, dus REM-, EM- en %-conversies komen overeen met uw project - of u nu de 16px-standaard, een 10px "62,5%"-truc of een lettergrootte op componentniveau gebruikt.
Er is geen vaste "van" en "to". Converteer px naar REM, REM naar PX, PX naar EM of PT naar PX - een eenheid naar een eenheid - van een enkele ingang.
Een ingebouwde tabel geeft een overzicht van de REM-, EM-, PT- en %-equivalenten voor de pixelgroottes die het meest voorkomen in typeschalen, zodat u een hele schaal op uw gekozen basis kunt bekijken.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Convert length, weight, temperature, area, volume, speed, time, data, pressure, energy, and angle units instantly with exact conversion factors
0 comments
No comments yet. Be the first to share your thoughts!