PX till REM Omvandlare

Webbläsarens standard är 16px.

Vad är PX till REM Omvandlare

En px till rem omvandlare översätter en CSS-storlek mellan pixlar och rem-enheter. En rem motsvarar sidans rotfontstorlek, som webbläsare sätter till 16px som standard, så 16px är 1rem och 24px är 1,5rem. Skriv ett värde i något av fälten så uppdateras det andra direkt. Ändra rutan för rotfontstorlek om ditt projekt använder en annan bas (ett vanligt knep är att sätta roten till 62,5% så att 10px blir 1rem).

Så använder du

  1. Ställ in rotfontstorleken om ditt projekt skiljer sig från standarden på 16px.
  2. Skriv ett pixelvärde i fältet Pixlar för att se motsvarande i rem.
  3. Eller skriv ett rem-värde i fältet REM för att se motsvarande i pixlar.
  4. Kopiera valfritt resultat med kopieringsikonen bredvid fältet.
  5. Klicka på Rensa för att nollställa fälten och börja en ny omvandling.

När du använder det

Bygger du en responsiv layout och behöver din rubrik på 24px i rem? Skriv 24 så får du 1,5rem, redo att klistra in i ditt stilmall. Att byta en design från fasta pixlar till skalbara rem håller text och luft i takt med läsarens webbläsarinställning, så den som ökar sin standardteckenstorlek ser hela layouten växa med, i stället för att låsas fast vid dina pixelvärden.

Vanliga frågor

Hur omvandlar jag px till rem?

Dividera pixelvärdet med rotfontstorleken. Med standardroten på 16px är 24px lika med 24 / 16 = 1,5rem och 8px lika med 8 / 16 = 0,5rem. För att gå åt andra hållet multiplicerar du rem-värdet med rotfontstorleken: 1,25rem vid en rot på 16px är 1,25 * 16 = 20px.

Vad är standardrotfontstorleken?

Webbläsare använder 16px som standardrotfontstorlek, så det här verktyget börjar där. Om din CSS ändrar font-size på html-elementet (till exempel till 62,5%, vilket gör roten 10px), uppdatera rutan för rotfontstorlek så att omvandlingen stämmer med ditt projekt.

Varför använda rem i stället för px i CSS?

rem-enheter skalas med rotfontstorleken, som respekterar den storlek en läsare har valt i sina webbläsarinställningar. Att ange teckensnitt, marginaler och utfyllnad i rem låter hela layouten växa eller krympa med den inställningen, vilket är bättre för tillgänglighet än fasta pixlar.

Kan jag dela det här verktyget med mina ifyllda uppgifter?

Ja. URL:en uppdateras automatiskt medan du skriver. Kopiera den från adressfältet eller använd Dela-knappen, den som öppnar länken ser exakt dina uppgifter redo att användas.

Relaterade verktyg