Conversor de px para rem e em

Como usar

Defina o tamanho base (padrão 16px) e digite o valor em qualquer campo: px, rem ou em. Os outros são calculados na hora. A tabela abaixo mostra os tamanhos mais usados.

rem ou em

rem é relativo ao tamanho da fonte do elemento html (16px por padrão no navegador). É previsível e respeita a preferência de fonte do usuário.
em é relativo à fonte do elemento pai e acumula em elementos aninhados.

Fórmula: rem = px / base.

Como implementar em código

Exemplos prontos para usar no seu projeto.

const pxParaRem = (px, base = 16) => px / base;
const remParaPx = (rem, base = 16) => rem * base;

console.log(pxParaRem(24));   // 1.5
console.log(remParaPx(0.875)); // 14

// Descobrir a base real do navegador:
// parseFloat(getComputedStyle(document.documentElement).fontSize)

def px_para_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_para_px(rem: float, base: float = 16) -> float:
    return rem * base

print(px_para_rem(24))     # 1.5
print(rem_para_px(0.875))  # 14.0

package main

func pxParaRem(px, base float64) float64 { return px / base }

func remParaPx(rem, base float64) float64 { return rem * base }

// pxParaRem(24, 16) == 1.5

double pxParaRem(double px, [double base = 16]) => px / base;

double remParaPx(double rem, [double base = 16]) => rem * base;

// pxParaRem(24) == 1.5

public class Unidades {
    static double pxParaRem(double px, double base) { return px / base; }

    static double remParaPx(double rem, double base) { return rem * base; }

    // pxParaRem(24, 16) == 1.5
}

<?php
function pxParaRem(float $px, float $base = 16): float { return $px / $base; }

function remParaPx(float $rem, float $base = 16): float { return $rem * $base; }

echo pxParaRem(24); // 1.5

static double PxParaRem(double px, double basePx = 16) => px / basePx;

static double RemParaPx(double rem, double basePx = 16) => rem * basePx;

// PxParaRem(24) == 1.5

Perguntas frequentes

Qual é a base padrão?

16px na maioria dos navegadores. Se você alterou o font-size do html, informe esse valor no campo base.

Por que usar rem em vez de px?

Porque rem acompanha a configuração de fonte do usuário, o que melhora a acessibilidade.

rem e em dão o mesmo número aqui?

Sim, porque assumimos que o pai do em tem o mesmo tamanho da base. Se o pai for diferente, use a fonte do pai como base.

Conversor de px para rem e em

Tabela de referência

Como usar

rem ou em

Como implementar em código

Perguntas frequentes

Veja também

Precisa de um sistema ou app sob medida?