Foros del Web » Creando para Internet » CSS »

Como sacar proporcionalidad entre medidas px & rem..?

Estas en el tema de Como sacar proporcionalidad entre medidas px & rem..? en el foro de CSS en Foros del 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 ...
  #1 (permalink)  
Antiguo 10/04/2013, 20:33
 
Fecha de Ingreso: junio-2009
Mensajes: 138
Antigüedad: 14 años, 8 meses
Puntos: 4
Como sacar proporcionalidad entre medidas px & rem..?

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.
  #2 (permalink)  
Antiguo 11/04/2013, 01:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Como sacar proporcionalidad entre medidas px & rem..?

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:
Ver original
  1. :root {
  2.   font-size: 62.5%
  3. }

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.

Etiquetas: medidas, píxeles, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:53.