¿Cómo calcular la proporción entre px y rem en diseño web?

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.

Ve a la fuente oficial CSS Values and Units Module Level 3

El em y el rem toman su valor relativos a otro objeto, su diferencia está de donde lo hacen, en pocas palabras:

em toma su valor del padre inmediato
y
rem toma su valor del elemento root (html)

Para que no te rompas la cabeza con las proporciones, hay un método para que las puedas usar fácilmente


Para explicar mejor la diferencias entre em y rem y ejemplo

tienes el siguiente html

css con em te daría las siguientes medidas


css con rem te daría las siguientes medidas

He visto que usan rem para soportar los dispositivos con retina display (donde la resolución se duplica) y cambian solo el valor del html para duplicar el tamaño, generalmente en diseños responsivos, le llaman elastic pixels.

Puedes combinarlo con em o px para navegadores que no lo soporten


Saludos...