Como converter de px para rem?

Oi Icaro,

Tudo depende do tamanho da fonte do elemento.

Para dar 12,5rem, o font-size está em 20px.

Tem um topico que o Sergio Lopes fala de EM e REM aqui.

Abcs!

Mas então Natan, como que eu faço essa conversão? É isso que estou querendo saber. Por exemplo, meu font-size é 40px, como eu calculo pra saber quanto equivale 40px em rem.

aaaaa certo, entendi.. então na verdade 12.5 é com relação ao font-size que é 20px e não ao 250px que ta no width... É que no código não tem nenhuma linha dizendo

font-size: 20px;

ele colocou o 12.5rem no lugar do width: 250px; e tinha um padding de 20px;

mas minha dúvida permanece a mesma que é como eu faço essa comparação/conversão entre o px e o rem. T-T

Oi Icaro,

Opa, muita calma!

Voce foi la e colocou a seguinte regra CSS:

div {
      font-size: 22px;
      width: 10rem; 
      padding: 1.5em;
 }

Vamos atacar o padding primeiro. Se o font-size desse elemento está com 22px, basta multiplicar o valor do padding por 22:

22 * 1.5 = 33

Então nessa situação colocar padding 1.5em ou 33px dá na mesma.

Agora vamos para o rem usado ali na width. A ideia é quase a mesma, voce ainda tem que multiplicar os valores. Mas diferentemente do EM, ele nao pega o font-size do elemento ou do pai do elemento, ele pega da raiz do documento todo! O elemento HTML!

Se o font-size do HTML tivesse assim:

html {
  font-size: 10px
}

O calculo é o mesmo.

10 * 10 = 100

Entao temos 10rem = 100px, nessa situacao.

Resumindo, EM e REM sempre sao com relacao a algum font-size.

Se for o EM é com relacao ao font-size do proprio elemento (ou do pai dele se nao tiver declarado).

Se for o REM é com relação ao font-size do elemento HTML.

Espero ter ajudado,

Abcs!

Obrigado Natan, me ajudou muito!