CSS-enhetskonverterare
Konvertera mellan px, rem, em, vw, vh och andra CSS-enheter
Inställningar och indata
Snabbval och exempel
Körs i din webbläsare. Dina indata stannar på den här enheten.
Resultat
Ange dina värden för att se resultatet.
Referens och beräkningsdetaljer
Om den kostnadsfria CSS-enhetskonverteraren
Verktyget CSS-enhetskonverteraren är ett kostnadsfritt, heltäckande verktyg för webbutvecklare och designers som direkt omvandlar mellan alla vanliga CSS-längdenheter. Oavsett om du ska omvandla pixlar till rem, em till procent eller viewport-enheter till absoluta mått ger verktyget exakta omvandlingar i realtid för 10 olika CSS-enheter samtidigt.
Att förstå och använda CSS-enheter rätt är grundläggande för att bygga responsiva, tillgängliga webbplatser. Relativa enheter som rem och em skalar med inställningarna för teckenstorlek, så att dina layouter anpassas efter användarens val och tillgänglighetsbehov. Viewport-enheter (vw, vh) ger flytande designer som följer skärmstorleken. Absoluta enheter (px, pt, cm, mm, in) ger fasta mått för exakt kontroll när det behövs.
Det här verktyget för CSS-enhetsomvandling är mer än en enkel kalkylator: du kan anpassa grundteckenstorleken för beräkningar av rem/em/% och ange viewport-mått för omvandling av vw/vh. Alla 10 enhetsresultat visas i ett tydligt rutnät med kopiering med ett klick och omedelbar enhetsväxling, vilket gör det till det snabbaste sättet att hitta rätt CSS-värde i alla designsammanhang.
Viktiga funktioner
- Omvandla mellan 10 CSS-enheter: px, rem, em, %, vw, vh, pt, cm, mm och in
- Alla omvandlingar visas samtidigt i ett responsivt rutnät
- Anpassningsbar grundteckenstorlek för exakta beräkningar av rem, em och procent
- Inställbar viewport-bredd och viewport-höjd för exakta omvandlingar av vw och vh
- Kopiering till urklipp med ett klick, med enhetssuffixet inkluderat
- Omedelbar enhetsväxling för att göra vilket omvandlat värde som helst till ny källa
- Snabbval för vanliga värden som 1rem, 100vw, 50% och vanliga teckenstorlekar
- Enhetsbeskrivningar som visar vad varje CSS-enhet står för
- Smart talformatering med lämplig decimalprecision
- Stöd för mörkt läge för bekväm användning i alla kodmiljöer
Så använder du CSS-enhetskonverteraren
- Ange ett värde: Skriv det siffervärde du vill omvandla i inmatningsfältet högst upp i verktyget.
- Välj källenhet: Välj CSS-enhet för ditt värde i rullgardinsmenyn (px, rem, em, %, vw, vh, pt, cm, mm eller in).
- Justera inställningar vid behov: Anpassa grundteckenstorleken (standard 16px) och viewport-måtten (standard 1920x1080) efter ditt projekts konfiguration.
- Se alla omvandlingar: Alla 10 enhetsomvandlingar visas direkt i rutnätet nedanför. Källenheten är markerad med blått så att den är lätt att hitta.
- Kopiera eller växla: Klicka på kopieringsikonen för att kopiera ett omvandlat värde med enhetssuffix, eller på växlingsikonen för att göra värdet till ny källa för fortsatta omvandlingar.
Användningsområden
- Responsiv design: Omvandla pixelbaserade designer från Figma eller Sketch till rem och em för skalbara, tillgängliga CSS-layouter.
- Tillgänglighetskrav: Byt från fasta px-värden till relativa rem/em så att dina layouter respekterar användarens val av teckenstorlek och WCAG-riktlinjerna.
- Viewport-baserade layouter: Räkna ut exakta vw- och vh-värden för helskärmssektioner, responsiv typografi och flytande avstånd.
- Utskriftsstilmallar: Omvandla skärmenheter till utskriftsvänliga pt, cm, mm och in för CSS-stilmallar med @media print.
- Utveckling av designsystem: Skapa enhetliga skalor för avstånd och typografi genom att omvandla mellan enhetssystem i dina designtokens.
- Byte av CSS-ramverk: Omvandla mellan enhetssystem när du flyttar från ett CSS-ramverk eller en metodik till en annan.
- Utveckling för flera plattformar: Se till att storlekarna blir konsekventa på webben, mobilwebben och i hybridappar genom att omvandla mellan plattformsspecifika enheter.
Vanliga frågor
Är verktyget gratis?
Ja, CSS-enhetskonverteraren är helt gratis att använda. Det finns inga användningsgränser, inget konto krävs och inga premiumfunktioner. Omvandla så många värden du behöver.
Är mina data säkra?
Absolut. Alla omvandlingar beräknas helt i din webbläsare med JavaScript. Ingen data skickas till någon server. Verktyget fungerar helt offline när sidan har lästs in.
Varför måste jag ange en grundteckenstorlek?
Relativa enheter som rem, em och % utgår från en referensteckenstorlek. De flesta webbläsare har 16px som standard, men ditt projekt kan använda en annan bas. Med rätt grundteckenstorlek blir omvandlingarna exakta för just ditt projekts konfiguration.
Vad är skillnaden mellan rem och em?
Både rem och em är relativa till teckenstorleken, men rem utgår alltid från teckenstorleken i rotelementet (html), medan em utgår från det överordnade elementets teckenstorlek. I den här konverteraren använder båda inställningen för grundteckenstorlek, eftersom den specifika DOM-kontexten inte finns tillgänglig.
Hur beräknas viewport-enheter?
1vw motsvarar 1 % av viewportens bredd och 1vh motsvarar 1 % av viewportens höjd. Konverteraren använder de viewport-mått du anger (standard 1920x1080) för att beräkna värdena. Justera inställningarna efter din målskärm för exakta resultat.
Hur fungerar omvandlingen från px till pt?
Omvandlingen använder standardförhållandet 96 CSS-pixlar per tum och 72 punkter per tum. Därför motsvarar 1pt ungefär 1,333px (96/72). Förhållandet är detsamma i alla moderna webbläsare och operativsystem.
Tips och bästa praxis
- Använd rem för typografi: Ange grundteckenstorleken på html-elementet och använd rem för all textstorlek, så blir typografin konsekvent och tillgänglig på hela webbplatsen.
- Föredra relativa enheter: Använd rem, em och % för avstånd och layout, så att designen anpassas efter användarens val och olika skärmstorlekar.
- Anpassa efter ditt projekt: Ange alltid grundteckenstorlek och viewport-mått i konverteraren så att de stämmer med ditt faktiska projekt, för exakta resultat.
- Använd viewport-enheter sparsamt: vw och vh är kraftfulla för flytande layouter, men de kan ställa till problem i mobila webbläsare där viewportens storlek ändras vid scrollning. Överväg CSS clamp() för mer robusta responsiva värden.
- Testa på flera enheter: Testa din CSS på flera enheter och skärmstorlekar efter omvandlingen för att se att värdena ger det visuella resultat du vill ha.
- Bokmärk vanliga omvandlingar: Använd snabbvalen för värden du ofta behöver, som 1rem, vanliga teckenstorlekar och typiska viewport-beräkningar, för att arbeta snabbare.