Vad är CSS-enhetsomvandlare?
CSS stödjer flera olika enheter för storlekssättning – absoluta sådana som px och pt, och relativa sådana som rem, em, vw, vh och %. Relativa enheter är viktiga för responsiv, tillgänglig design (särskilt rem respekterar användarens webbläsarinställning för fontstorlek), men att omvandla mellan dem i huvudet är verkligen svårt, eftersom resultatet beror på sammanhanget: rotfontstorleken, det aktuella elementets fontstorlek eller visningsytans dimensioner.
Den här omvandlaren gör matematiken åt dig: ställ in din basfontstorlek, visningsytans dimensioner och värdet du omvandlar från, och se motsvarande värde i alla andra enheter direkt – användbart för att översätta en designskiss pixelmått till responsiva rem/vw-värden, eller för att dubbelkolla vad en befintlig CSS-regel faktiskt renderas som på skärmen.
När du ska använda denna kalkylator
- När du behöver utvärdera verktygskostnader innan du startar ett projekt
- När du jämför resultat med liknande verktyg
- När du lär dig hur du använder verktyget i olika scenarier
- När du delar resultat med teamet eller kunder
- När du verifierar verktygets beräkningsnoggrannhet
- När du söker ett snabbt och enkelt sätt att lösa ett specifikt problem
Steg:
- Ange värdet du vill omvandla och välj dess startenhet.
- Ställ in din basfontstorlek (standard är webbläsarens 16px).
- För vw/vh-omvandlingar anger du din målvisningsytas bredd och höjd.
- Läs av motsvarande värde i alla andra enheter direkt.
Formel
1rem = 1em = basfontstorlek (standard 16px)
1pt = 96/72 px ≈ 1,333px
1vw = visningsytans bredd / 100
1vh = visningsytans höjd / 100
1% = referensvärde / 100
Användningsområden
- Omvandla en designers pixelbaserade Figma/Sketch-spec till rem-värden för tillgänglig CSS
- Kontrollera vad en vw-baserad responsiv fontstorlek faktiskt renderas som vid en specifik skärmbredd
- Översätta äldre pt-baserad tryck- eller e-post-CSS till webbstandard px eller rem
- Granska om ett designsystems skal-avstånd harmonierar rent över enheter
- Snabbt dubbelkolla ett CSS-värde under kodgranskning utan att öppna utvecklarverktyg
Viktiga fördelar
- Omvandlar mellan alla 7 vanliga CSS-enheter på ett och samma ställe
- Använder din faktiska basfontstorlek och visningsyta, inte ett fast antagande
- Omedelbara resultat medan du skriver – inget behov av att öppna utvecklarverktyg
- Gratis, ingen registrering, körs helt i din webbläsare
Proffstips
- Föredra rem framför em för fontstorlekar för att undvika oväntad ackumulering i kapslade komponenter
- Använd dvh/svh i stället för vh för mobila helskärmslayouter om dina målwebbläsare stödjer det
- Håll en konsekvent basfontstorlek genom ditt designsystem så att rem-omvandlingar förblir förutsägbara
- När du översätter en pixelperfekt design, omvandla avstånd till rem men behåll rambredder och andra fina detaljer i px
Vanliga misstag att undvika
- Anta att 1rem alltid motsvarar 16px, utan att kontrollera om rotfontstorleken ändrats
- Använda vh för mobila helhöjdslayouter utan att ta hänsyn till webbläsarens adressfältsbeteende
- Kapsla em-baserade fontstorlekar och bli förvånad när de ackumuleras oväntat
- Blanda px och rem inkonsekvent inom samma komponent, vilket bryter tillgänglighetsskalningen
Viktiga begrepp förklarade
- Rotfontstorlek: Fontstorleken som sätts på html-elementet, som alla rem-enheter är relativa till
- Visningsyta: Det synliga området av en webbsida i webbläsarfönstret
- Absolut enhet: En enhet som px eller pt med en fast verklig storlek, inte relativ till något sammanhang
- Relativ enhet: En enhet som rem, em, vw eller % vars storlek beror på ett annat värde
Relaterade begrepp
- Färgkonverterare: Konvertera mellan färgformaten HEX, RGB och HSL
- Längdkonverterare: Konvertera mellan tum, centimeter, pixlar med mera
- Enhetskonverterare: Konvertera mellan olika måttenheter
- Kalkylator för bildförhållande: Beräkna och konvertera bildförhållanden
- Datakonverterare: Konvertera mellan byte, KB, MB, GB och TB
Exempel
Med en basfontstorlek på 16px omvandlas 1,5rem till 24px. Vid en visningsytabredd på 1440px omvandlas 5vw till 72px.
Tolka dina resultat
Det här verktyget visar detaljerade resultat baserat på dina uppgifter. Gå igenom varje avsnitt noggrant för att förstå hur du ska tolka siffrorna och fatta beslut utifrån dem.
Om du har frågor om hur verktyget fungerar eller hur du ska tolka vissa resultat, kolla in FAQ-avsnittet nedan eller kontakta supporten.