Vad verktyget gör
Konverteraren för px till rem & em omvandlar ett pixelvärde till motsvarande rem- och em-värden, och omvänt. Du kan skriva in ett värde i valfritt av de tre fälten – px, rem eller em – och verktyget räknar automatiskt ut och visar de andra två. Du kan också ställa in en egen rot-textstorlek och en egen teckenstorlek för em-kontext, så att omvandlingarna stämmer med just din design. Det passar dig som behöver omvandla fasta pixelvärden till relativa rem- eller em-enheter för responsiv design, som vill förstå hur olika rot-textstorlekar påverkar rem-värden, som behöver räkna ut em-värden utifrån ett specifikt elements teckenstorlek, eller som vill säkerställa att storlekarna skalar korrekt när en läsare ändrar sin standardtextstorlek.
Skillnaden mellan px, rem och em
px är en fast längd. rem mäts mot sidans rot-textstorlek, så vid en rot på 16px motsvarar 1rem 16px. em mäts mot teckenstorleken på det element den ligger i. Att använda rem för text och avstånd gör att allt skalas fint när en läsare ändrar sin standardtextstorlek. När du öppnar verktyget är rot-textstorleken och em-kontexten båda satta till 16px, vilket innebär att 16px, 1rem och 1em från början motsvarar exakt samma längd.
Rot-textstorlek och em-kontext
Fältet Rot-textstorlek (px) avgör vad rem-värdena räknas mot, medan Teckenstorlek för em-kontext (px) avgör vad em-värdena räknas mot. De två är inte alltid samma sak: em är relativ till teckenstorleken på sitt eget element, vilket inte alltid är roten. Sätt em-kontexten till det elementets teckenstorlek för att beräkna em korrekt, och låt den vara lika med roten när de två matchar.
Standardvärdet för både rot-textstorleken och em-kontexten är 16px. Ändrar du fältet för rot-textstorlek så att det matchar din egen CSS, uppdateras alla rem-värden direkt. Båda fälten måste vara ett tal större än 0 – annars visar verktyget ett felmeddelande, som beskrivs längre ner.
Så använder du fälten
Ändra valfritt av fälten px, rem eller em, så uppdateras de andra två medan du skriver – verktyget omvandlar mellan alla tre enheter löpande. Det går även att skriva in negativa pixelvärden.
Ett par räkneexempel vid standardinställningen på 16px: 24px motsvarar 1,5rem (24 delat med 16), och 32px motsvarar 2rem (32 delat med 16). Ändrar du i stället rot-textstorleken till 20px, motsvarar 30px 1,5rem (30 delat med 20). Samma princip gäller negativa värden: -8px vid en rot-textstorlek på 16px blir -0,5rem.
När du har skrivit in ett värde visar verktyget statusen "Konverterat mellan alla tre enheter." Samtidigt visas den rot-textstorlek och den em-kontext du själv har ställt in bredvid resultatet, så att du alltid ser vilka inställningar omvandlingen utgår från och kan bekräfta att de stämmer med din CSS innan du använder värdena.
Tabellen och felmeddelanden
Under omvandlingsfälten visas tabellen Vanliga px → rem (16px bas), som listar vanliga pixelvärden omvandlade till rem utifrån en rot-textstorlek på 16px – oberoende av vad du för tillfället har ställt in i fältet Rot-textstorlek (px) ovanför.
Om ett fält innehåller ett ogiltigt värde visar verktyget ett tydligt felmeddelande för just det fältet. Skriver du in något som inte är ett tal i fältet Värden visas "Ange ett tal att konvertera." Är rot-textstorleken ogiltig visas "Rot-textstorleken måste vara ett tal större än 0.", och är em-kontextens teckenstorlek ogiltig visas "Teckenstorleken för em-kontext måste vara ett tal större än 0." På så sätt ser du direkt vilket av de tre fälten som behöver rättas.
Integritet
Varje omvandling sker i din webbläsare. Inget av det du skriver laddas upp till BroBroGo.
Vanliga frågor
Vad är skillnaden mellan px, rem och em?
px är en fast längd. rem mäts mot sidans rot-textstorlek, så vid en rot på 16px motsvarar 1rem 16px. em mäts mot teckenstorleken på det element den ligger i. Att använda rem för text och avstånd gör att allt skalas fint när en läsare ändrar sin standardtextstorlek.
Varför finns det en separat storlek för em-kontext?
em är relativ till teckenstorleken på sitt eget element, vilket inte alltid är roten. Sätt em-kontexten till det elementets teckenstorlek för att beräkna em korrekt, och låt den vara lika med roten när de två matchar.
Vad händer om min rot-textstorlek inte är 16px?
Ändra fältet för rot-textstorlek så att det matchar din CSS, så uppdateras alla rem-värden direkt. Den snabba tabellen nedan är en praktisk guide för den vanliga basen på 16px som de flesta webbplatser utgår från.