Pixel till EM/REM-omvandlare
Omvandla px, rem, em, pt och % med en livetabell och kopieringsklar CSS
rem är relativt rotteckenstorleken; em och % är relativa till föräldern.
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
Om Pixel till EM/REM-omvandlare
Pixel till EM/REM-omvandlaren översätter CSS-längdvärden mellan px, rem, em, pt och procent. Ange ett värde i valfri av de fem enheterna så visar en levande tabell dess motsvarighet i alla de andra — plus ett kopieringsklart CSS-utdrag du kan klistra in direkt i ett stilmallsdokument.
Omvandlingarna följer hur CSS faktiskt tolkar enheter: rem är relativt till rotens teckenstorlek, medan em och % är relativa till föräldraelementets teckenstorlek. Båda referensstorlekarna är redigerbara, så du kan modellera en 16 px-rot med en 14 px-komponent, eller vilken designsystemskala du än använder.
En tabell med vanliga värden mappar de storlekar designers oftast använder — så frågor som "vad är 24px i rem" besvaras med en snabb blick. Verktyget är gratis, uppdateras medan du skriver och är ett standardverktyg för att omvandla fasta pixelmockuper till tillgänglig, skalbar rem-baserad CSS.
Så använder du Pixel till EM/REM-omvandlare
- Ange värdet att omvandla och välj dess enhet: px, rem, em, pt eller %.
- Justera rotens teckenstorlek (för rem) och förälderns teckenstorlek (för em och %) om de skiljer sig från 16 px.
- Läs de omvandlade värdena i den levande tabellen.
- Kopiera det genererade CSS-utdraget eller vilket värde som helst från tabellen med vanliga värden.