
Diseñar en unidades EM con el porcentaje magico
Las unidades EM son una solución excelente para que el diseño web sea realmente flexible. Pero plantean un problema de base puesto que la conversión de pixeles a ems no es nada amigable.
En un post anterior titulado Convertir PX en EM con Em Calculator ya hemos mencionado una herramienta que nos puede ayudar en esta tarea, también comentábamos como los diferentes programas de edición web no tienen este tema en cuenta para ayudar en el trabajo del diseñador web.
Otra forma de conversión de PX a EM es hacer uso del viejo porcentaje «mágico» 62.5%
en body
. La sorprendente idea y el calculo se lo debemos a Richard Rutter.
Ejemplo del porcentaje mágico
body { font-size: 62.5%; } #wrapper { width: 100em; } #header { width: 20em; } #logo { width: 2.5em; }
Donde:
- 1000px = 100em
- 200px = 20em
- 25px = 2.5em
- etc.
Una evolución del porcentaje mágico
body { font-size: 100%; } #wrapper { width: 62.5em; } #header { width: 12.5em; } #logo { width: 1.5625em; }
Donde:
- 1000px = 1000 / 16 = 62.5em
- 200px = 200 / 16 = 12.5em
- 25px = 25 / 16 = 1.5625em
- etc.
Con ello tenemos una forma más amigable de lograr la conversión PX > EM.
3 Comments
kcmr
Hola otra vez!
Escribí hace un tiempo un post sobre esto, ya que el 62.5% aplicado al body presenta un problemilla para IE, y es que ignora el porcentaje en decimales, con lo que la equivalencia conseguida no es de 10px sino de 9.92px. Puede parecer una pijada pero se nota.
Yo uso esta, que establece en 20px el tamaño de fuente para el HTML y en la mitad para el body, consiguiendo la equivalencia exacta en 10px para todos los navegadores.
html{ font-size: 125%; }
body{ font-size: .5em; }
Con esta técnica la conversión sigue siendo tan sencilla como dividir la medida en píxeles por 10.
javiaurea
Eso es Kus, te doy la razón totalmente.
En un proyecto reciente lo viví en mis propias carnes y lo solucione de forma similar.
Muchísimas gracias por tu aportación.
Chris
Hola. Esto se sigue haciendo igual o ha evolucionado a día de hoy?
Yo usé hace un tiempo otra manera que no consigo encontrar…
Saludos
Comments are closed for this post