Hoppa till innehåll
TextArray
100% lokalt

CSS-enhetsomvandlare

Konvertera CSS-längder mellan px, rem, em, pt och % mot valfri rotteckensnittsstorlek.

Inmatning
Utmatning
Relaterade verktyg
Kalkylator för bildförhållandeUtvecklarverktyg
FärgomvandlareUtvecklarverktyg
CSS-minifierareUtvecklarverktyg
Cron expression parserUtvecklarverktyg
CSS-formaterarenyUtvecklarverktyg
CSS-gradientgeneratornyUtvecklarverktyg
CSS-enhetsomvandlare
Klistra in CSS-värden ett per rad - 16px, 1,5rem, 12pt, 150% - och den här omvandlaren översätter dem direkt. Ett blankt tal läses i den enhet som ställts in av From select, medan en enhet skriven på raden alltid vinner, så du kan blanda pixlar och rems i en lista. Välj ett mål under Till, eller välj Alla enheter för att se hela kedjan med en blick: 16px = 1rem = 12pt = 100%. Linjer som inte är rena värden passerar oförändrade, så en bortkommen kommentar bryter aldrig loppet.
Matematiken hänger på ett nummer: basstorleken, rotteckensnittsstorleken i pixlar. Webbläsare är som standard 16px, varför 1rem vanligtvis är lika med 16px och 100% lika med basen. Ställ in basen till 10 för det klassiska 62,5%-tricket där 1,5rem är 15px, eller matcha ett designsystem med en annan rot. Poäng fixeras av CSS själv — 1px är 1/96 av en tum och 1pt är 1/72, så 16px är exakt 12pt oavsett bas. Alternativet för decimaler begränsar precisionen på upp till sex platser, med efterföljande nollor trimmade.
Rem är den tillgänglighetsvänliga enheten: den skalas med läsarens teckensnittsstorlek i webbläsaren, så text som anges i rem växer när någon höjer sin standardstorlek, medan px förblir fast. Em använder samma matematik här, men i en riktig stilmall är den relativt till elementets egen teckenstorlek, så kapslade em värderar sammansatta där rem inte gör det — den här omvandlaren antar det platta, rotrelativa fallet.
Allt körs lokalt i din webbläsare — ingenting laddas upp och det finns inget att vänta på. Kopiera den konverterade listan eller ladda ner den som en .txt-fil.
FAQ
Varför använda rem istället för px?
Rem-värden skalas med teckenstorleken som läsaren ställer in i sin webbläsare, så att personer som behöver större text faktiskt får det. Px-värden ignorerar den inställningen. Att konvertera en px-baserad design till rem är en av de billigaste tillgänglighetsvinsterna som finns.
Vad är basstorleken och varför är den som standard 16?
Det är rotteckensnittsstorleken i pixlar - vad 1rem, 1em och 100% refererar till. Alla större webbläsare levereras med en standard på 16px, så 16 är den rätta basen om inte din stilmall ändrar roten, till exempel html { font-size: 62.5% } vilket gör basen 10.
Vad är skillnaden mellan em och rem?
Rem är alltid relativt till root-fontstorleken; em är relativt det aktuella elementet, så kapslade em-värden multipliceras. Denna omvandlare behandlar båda mot den enda basstorleken - det platta fodralet. I djupt kapslad uppmärkning kan verkliga em-värden skilja sig åt.
Vad händer med linjer som inte är värden?
De passerar till utgången oförändrade och räkningen räknar dem som överhoppade. Endast vanliga värden som 16px, 1,5rem eller ett blott antal konverteras – fullständiga CSS-deklarationer är utanför omfattningen.
Är min text uppladdad någonstans?
Nej. Verktyget körs helt i din webbläsare och din inmatning lämnar aldrig din enhet.
Läs vidare