Como sacar proporcionalidad entre medidas px & rem..?

[Lokitozzz]

Buenas como muchos diseñadores, creo, sabrán hay una nueva medida, unidad o como quieran llamarle, para tamaños a la hora de hacer sus diseños.

Pero me surge una duda, & esta es, ¿Como se saca la proporcionalidad en entre px & rem?

Les pongo un ejemplo sacado del theme Twenty Twelve de WP:

- 40px corresponde a 2.857142857rem
- 48px corresponde a 3.428571429rem

Quienes lo hayan visto entenderán, ya que no consigo conseguir esos datos tan exactos.

Saludos & gracias de antemano.

[pzin]

rem es una medida relativa, pero a diferencia de em, no depende del elemento padre y no se va heredando si no que depende de la raiz. De ahí el nombre, root em.

Como es una medida relativa, realmente no se puede decir que 2.8rem correspondan a 40px igual que no se puede decir que 100% equivalen a 1024px.

Evidentemente, si un elemento mide de 500px, y luego sus hijos de 50%, se puede decir que en tal caso ese valor corresponderá a 250px. Y lo mismo pasa con rem, si especificas una medida en la raíz y pones que la fuente mida 14px, entonces 2,5rem serán igual a 35px en el documento.

Y de ahí aparece el famoso:

Código CSS:

:root {
  font-size: 62.5%
}
 

Que no es más que una convención para que em, en la raíz, tenga una relación con una medida absoluta; luego 1em = 10px, 1.6em = 16px, etc.